Comment utiliser jQuery pour remettre la page en haut (code ci-joint)

Avez-vous remarqué lors de votre navigation sur le site que lorsque vous faites glisser la page vers le bas, un bouton de retour en haut apparaît. Cliquez pour revenir en haut. Savez-vous comment revenir en haut de la page HTML ? Cet article partagera avec vous le code jQuery qui renvoie la page HTML la plus simple en haut. Les amis intéressés peuvent s'y référer.

Obtenir l'effet de renvoyer la page en haut nécessite de nombreuses connaissances en JavaScript, telles que : function(), animate, fadeOut, etc. Si vous n'êtes pas sûr, vous pouvez vous référer aux articles pertinents sur le site Web PHP chinois, ou visitez le Tutoriel vidéo JavaScript.

Exemple de description : L'utilisateur glisse vers le bas de la page. Lorsque la distance entre la barre de défilement et le haut est supérieure à 100 px, fadeIn est utilisé pour afficher le bouton de retour. Lorsque le bouton est cliqué pour revenir en haut. , le bouton disparaît. Le code spécifique est le suivant :

Partie HTML :

<div id="wrapper">
     <div class="cont1"></div>
     <div class="cont2"></div>
     <div class="cont3"></div>
     <div class="cont4"></div>
     <a href="javascript:void(0)" id="toTop" style="display: block;"> 
     </a>
</div>

Partie CSS :

*{margin: 0;padding: 0;}
            #wrapper{margin: 0 auto;width: 500px;}
            .cont1{height: 500px;background-color: wheat;}
            .cont2{height: 500px;background-color: honeydew;}
            .cont3{height: 500px;background-color: blueviolet;}
            .cont4{height: 500px;background-color: pink;}
            #toTop {display: none;text-decoration: none;position: fixed;bottom: 20px;right: 20px;overflow: hidden;width: 50px;height: 50px;background: url(img/icon_top.png) no-repeat center center;}

Partie JavaScript. :

Remarque : Parce qu'il est écrit avec jQuery , pensez à introduire le fichier jQuery

$(function(){
         //当滚动条的位置处于距顶部100像素以下时，跳转链接出现，否则消失
         $(function () {
             $(window).scroll(function(){
                 if ($(window).scrollTop()>100){
                     $("#toTop").fadeIn(1000);
                 }
                 else
                 {
                     $("#toTop").fadeOut(1000);
                 }
             });
             //当点击跳转链接后，回到页面顶部位置
             $("#toTop").click(function(){
                 $('body,html').animate({scrollTop:0},1000);
                 return false;
             });
         });
    });

Rendu :

Ce qui précède a partagé avec vous comment utiliser jQuery pour implémenter le code pour revenir en haut de la page HTML. Les étapes sont très détaillées et faciles à comprendre. Les débutants peuvent l'essayer par eux-mêmes pour voir si votre code peut obtenir l'effet de retour. le haut. J’espère que cet article vous sera utile !

[Recommandations de didacticiel associées]

1. Manuel de référence en chinois jQuery
2 Tutoriel vidéo jQuery
3. >Tutoriel bootstrap

Si vous souhaitez télécharger le code de l'effet de retour en haut, vous pouvez visiter :

Code de retour en haut colonne !

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!