communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
Maison > interface Web > js tutoriel > Le bouton de retour en haut répond au défilement et affiche et masque les compétences Dynamically_Javascript

Le bouton de retour en haut répond au défilement et affiche et masque les compétences Dynamically_Javascript

WBOY
Libérer： 2016-05-16 16:34:03
original
1031 Les gens l'ont consulté

De nombreux sites Web disposent d'une fonction de retour en haut pour afficher et masquer dynamiquement les paramètres de défilement, ce qui est plus adapté aux débutants

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>实现动态的显示回到顶部与否</title>
<style>
/*返回顶部*/
.back_top {width:45px;height:45px;background:url(back_top_new.png) 0 0;position:fixed;left:50%;margin-left:500px;bottom:105px;display:none;}
.back_top:hover{background:url(images/back_top_new.png) 0 -46px;}
</style>
</head>

<body>
<a title="返回顶部" href="javascript:void(0)" class="back_top"></a>
<script src="js/jquery-1.11.0.min.js"></script>
<script>
var mousewheelevt=(/Firefox/i.test(navigator.userAgent))&#63; "DOMMouseScroll" : "mousewheel"; //FF doesn't recognize mousewheel as of FF3.x
if (document.attachEvent) //if IE (and Opera depending on user setting)
document.attachEvent("on"+mousewheelevt, function(e){
var t=document.body.scrollTop+document.documentElement.scrollTop;
if(t==0){
$(".back_top").css("display","none");
}
else{
$(".back_top").css("display","block");
}
});
else if (document.addEventListener) //WC3 browsers
document.addEventListener(mousewheelevt, function(e){
var t=document.body.scrollTop+document.documentElement.scrollTop;
if(t==0){
$(".back_top").css("display","none");
}
else{
$(".back_top").css("display","block");
}
}, false);

</script>
</body>
</html>
Copier après la connexion
Étiquettes associées：
动态显示 返回顶部
source：php.cn
Article précédent：Résumé des compétences JavaScript inter-domaines en matière de méthodes_javascript Article suivant：Implémentation spécifique de js empêchant les compétences appending_javascript d'événement
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Derniers numéros
Quel est le format des variables dans la valeur de retour ? Je suis un nouvel apprenant de php. J'ai trouvé un morceau de code : if($x<time()){retu...
Depuis 2024-04-06 21:55:20
0
1
778
Obtenez la valeur de retour totale de la méthode du champ de saisie J'essaie de trouver la valeur totale saisie par l'utilisateur. Obtenez un agrégat qui mult...
Depuis 2024-04-06 18:19:37
0
1
380
L'entrepôt d'entités étend JpaRepository<Entity, Id> et JpaSpecificationExecutor<Entity>, et EntitySpec étend Spécification<Entity> Ceci est mon point de terminaison http://localhost:8080/country/all les réponses sont ok p...
Depuis 2024-04-06 17:11:03
0
1
421
Utiliser Eloquent pour les requêtes internes L'adresse de l'image contient l'emplacement et le nombre total d'utilisateurs. Utilisateur...
Depuis 2024-04-06 16:45:50
0
1
515
Soumettre le formulaire sans bouton en utilisant Javascript/Jquery J'essaie de soumettre un formulaire sans bouton en appelant une fonction JavaScript et en ...
Depuis 2024-04-06 14:54:03
0
2
421
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal