html

<div style="width: 100%; height: 3000px;">
           <!--這個帶ID的p標簽，叫做錨標記，放在頁面頂部位置，目的：防止代碼不起作用時(比如類庫版本瀏覽器不支持)，你點擊回到頂部，仍然可以通過錨標記實現-->
          <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() {
                          /* 判斷滾動條 距離頁面頂部的距離  100可以自定義*/
                          if($(window).scrollTop() > 100) {
                            $("#top_sec").fadeIn(100); /* 這裏用.show()也可以 只是效果太醜 */
                          } else {
                             $("#top_sec").fadeOut(100);
                         }
                     });
                 });
                 /* 給圖片元素綁定 回到頂部的事件 */
                 $(function() {
                     $("#goPageTop").on("click", function() {
                         $(‘body,html‘).animate({
                             scrollTop: 0
                         }, 1000);
                         return false;
                     });
                 });
             });

jq 回到頂部