Dans notre processus de développement quotidien, afin d'offrir aux utilisateurs une meilleure expérience, nos pages auront une fonction de retour en haut. La plus courante consiste à utiliser JavaScript pour implémenter le code de retour en haut. Aujourd'hui, laissez-moi vous présenter JavaScript en détail Retour en haut du code et commentaires !
J'ai récemment créé une page de classement avec de nombreuses catégories et je l'ai affichée sous forme d'images et de texte... Au final, la page était évidemment trop longue, et l'expérience utilisateur n'était naturellement pas assez bonne. Enfin, j'ai pensé à ajouter une navigation de saut dans la page dans la partie supérieure de la page pour accéder directement au bloc d'ancrage de nom de catégorie de cette page. Bien entendu, cela doit être combiné avec la fonction « retour en haut » pour obtenir une meilleure expérience. Bien entendu, dans des circonstances normales, il faut d’abord éviter les pages trop longues. Si le contenu est faible et pas assez pertinent, le taux de rebond sera très élevé.
Ce qui suit est une implémentation de code simple de l'effet de retour en haut, avec des commentaires.
Méthode 1 : Utiliser les ancres nommées Cliquez pour revenir à l'élément supérieur avec l'identifiant par défaut du haut
code html
<a href="#top" target="_self">返回顶部</a>
Méthode 2 : actionner la fonction de défilement pour contrôler la position de la barre de défilement (le premier paramètre est la position horizontale, le deuxième paramètre est la position verticale)
code html
<a href="javascript:scroll(0,0)">返回顶部</a>
Inconvénients :L'effet de retour est immédiat et n'est pas conforme à la sensation de défilement des pages de navigation générale
est fixé statiquement en bas de page et peut ne pas l'être ; être visible pour les utilisateurs.
code js
pageScroll(){ window.scrollBy(0,-100); scrolldelay = setTimeout('pageScroll()',100); sTop=document.documentElement.scrollTop+document.body.scrollTop; (sTop==0) clearTimeout(scrolldelay); }
Code HTML
<a onclick="pageScroll()">返回顶部</a>
Inconvénients : L'effet de défilement n'est pas fluide, et lorsque la page est très longue, cliquez pour revenir en haut si vous le souhaitez. n'atteignez pas le haut de la page, vous ne pouvez plus parcourir la page normalement
Comme ci-dessus, elle est toujours fixée statiquement en bas de la page et ne peut pas être exposée aux utilisateurs.
js code
gotoTop(min_height){ gotoTop_html = '<p id="gotoTop">返回顶部</p>'; $("#page").append(gotoTop_html); $("#gotoTop").click( (){$('html,body').animate({scrollTop:0},700); }).hover( (){$().addClass("hover");}, (){$().removeClass("hover"); }); min_height ? min_height = min_height : min_height = 600; $(window).scroll((){ s = $(window).scrollTop(); ( s > min_height){ $("#gotoTop").fadeIn(100); }{ $("#gotoTop").fadeOut(200); }; }); }; gotoTop();
code de style CSS
{:;:;:75;:;:;:;:;:;:;:;:;:;}{:;:}{:;:;:;}
Cette méthode détermine la hauteur de la page et affiche "retour en haut" à l'utilisateur comme nécessaire et utilise le style CSS pour implémenter le positionnement absolu de l'écran, en utilisant jQuery pour obtenir un effet de défilement meilleur et fluide. Une autre considération est que si l'utilisateur configure le navigateur pour désactiver js, nous pouvons alors combiner la troisième solution avec la première solution. Après avoir désactivé js, la troisième solution ne sera pas visible pour l'utilisateur. Si elle n'est pas désactivée, nous l'ajouterons. une phrase dans le code js Masquer la première option.
Résumé :
En bref, les pages longues sont à éviter autant que possible. Lorsqu'elles sont inévitables, ajouter la fonction "retour en haut". mai Cela donnera aux utilisateurs une expérience relativement meilleure, j'espère que cela vous sera utile !
Recommandations associées :
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!