jq 回到顶部

Posted 2020-11-01 慕东

 

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