jq back to top

 

html

< div style = "width: 100%; height: 3000px;" > 
           <!-- This p tag with an ID, called an anchor tag, is placed at the top of the page, the purpose: to prevent the code from not working (such as the class library version browsers do not support), you click back to the top, you can still achieve this through anchor tags --> 
          < p id = "pageTop" ></ p > 
         < section id = "top_sec" class = "top_sec" > 
              < a href = "#pageTop" id ="goPageTop" ></ a > 
          < a href ="#" id ="goPageHome" ></ a >
     </section>
     </div>

css

<style>
    .top_sec {
              position: fixed;
              bottom: 74px;
              right: 12px;
              width: 42px;
              z-index: 999;
              display: none;
          }
          
          #goPageTop {
              width: 42px;
              height: 42px;
              margin-bottom: 10px;
              border-radius: 50%;
              background: url(img/go_top_icon.png) no-repeat 0 0;
              background-size: 42px auto;
              display: block;
          }
          
          #goPageHome {
              width: 42px;
              height: 42px;
              position: relative;
              border-radius: 50%;
                background: url(img/go_home_icon.png) no-repeat 0 0;
                background-size: 42px auto;
                display: block;
            }
</style>

js

$(function() {
                  $(function() {
                      $(window).scroll(function() {
                          /* Judging the distance of the scroll bar from the top of the page to 100 can be customized*/
                          if($(window).scrollTop() > 100) {
                            $("#top_sec").fadeIn(100); /* Using .show() here can also be just too ugly*/
                          } else {
                             $("#top_sec").fadeOut(100);
                         }
                     });
                 });
                 /* Bind the event to the image element back to the top */
                 $(function() {
                     $("#goPageTop").on("click", function() {
                         $('body,html').animate({
                             scrollTop: 0
                         }, 1000);
                         return false;
                     });
                 });
             });