JavaScript revient simplement au code et aux commentaires du haut

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.

1. Le retour statique le plus simple en haut, cliquez pour passer directement en haut de la page, courant en emplacement fixe en bas de page, fonction de retour en haut

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.

2. Retour statique simple vers le haut, utilisez js pour simuler l'effet de défilement et glissez vers le haut

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.

3. Chargement dynamique à la demande vers le haut, écran latéral CSS positionnement absolu, combiné avec une animation jQuery simple pour obtenir une meilleure expérience

js code

 gotoTop(min_height){
     gotoTop_html = &#39;<p id="gotoTop">返回顶部</p>&#39;;
    $("#page").append(gotoTop_html);
    $("#gotoTop").click(
(){$(&#39;html,body&#39;).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 :

Exemple d'implémentation JavaScript de l'effet de retour en haut

javascript - Comment faire revenir le contenu de l'iframe en haut en dehors de l'iframe

JS implémente un effet spécial de retour en haut

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!