How to use jQuery to return the page to the top (code attached)

Have you noticed when browsing the website that when you slide down the page, a return to the top button will appear. Click to return to the top. Do you know how to achieve the return to the top of the HTML page? This article will share with you the jQuery code that returns the simplest HTML page to the top. Interested friends can refer to it.

Achieving the effect of returning the page to the top requires a lot of JavaScript knowledge, such as: function(), animate, fadeOut, etc. If you are unclear, you can refer to the relevant articles on the PHP Chinese website, or visit JavaScript video tutorial.

Instance description: The user slides down the page. When the distance between the scroll bar and the top is greater than 100px, fadeIn is used to display the return button. When the button is clicked to return to the top, the button disappears. The specific code is as follows:

HTML part:

<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>

CSS part:

*{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;}

JavaScript part:

Note: Because it is written with jQuery, remember to import it jQuery file

$(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;
             });
         });
    });

Rendering:

The above has shared with you how to use jQuery to implement the code to return to the top of the HTML page. The steps are very detailed and simple. Yes, beginners can try it themselves and see if your code can achieve the effect of returning to the top. I hope this article will be helpful to you!

【Recommended related tutorials】

1. jQuery Chinese Reference Manual
2. jQuery Video Tutorial
3. bootstrap tutorial

If you want to download the return to top effect code, you can visit: Back to top code column!

The above is the detailed content of How to use jQuery to return the page to the top (code attached). For more information, please follow other related articles on the PHP Chinese website!