Several ways to return to the top of a Web page

1. Pin a button at the top of the page that returns to the top of the page

. back-to-top {
    position:fixed;
    right:20px;
    bottom:10px;
    width:100px;
    height:30px;
    Text-align:center;
    line-height:30px;
    Color: #2C2C2C;
    Text-decoration:none;
    border:1px solid #CCCCCC;


}

<a class= "Back-to-top" href= "#top" > Back to Top </a>

So click on the button to go directly to the top of the page

2, using the jquery method

<script>
    var backbtn= $ ('. Back-to-top ');
    Backbtn.on (' click ', function () {
          $ (' Body,window '). Animate (
              {
                  scrolltop:0
              },300
          )
     
    })
    $ (window). On (' scroll ', function () {
         if (window). scrolltop () >$ (window). Height ()) {
               Backbtn.fadein ();
         }else{
               Backbtn.fadeout ();
         }
    })
</script>

3 Using a custom link anchor:

In this way, the custom link anchor is used, you must define the anchor, and then use the hyperlink to point to the anchor.

This method is almost the same as the second method, except that you have to define an additional link anchor.

4 href points to a specific ID:

This method is in the page's existing label, using the "back top" of the attached href point to the top with the id attribute of the label, to achieve return to the top of the function. This method requires a label with an ID attribute in the label at the top of the page to implement the pointer to the top. You can also customize the Add.

5 using a simple script:

This method is also recently known, you can set the value of x, y in Scrollto (0,0) to jump to the specific location of the page.

<a href= "javascript:window.scrollTo (0, 0);" ></a>

Several ways to return to the top of a Web page