jq 回到顶部

Posted 慕东

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jq 回到顶部相关的知识,希望对你有一定的参考价值。

 

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 回到顶部的主要内容,如果未能解决你的问题,请参考以下文章

html 回到顶部片段

css 回到顶部的片段

RestFramework

web--JQeury基础实例汇总

使用 jq 在数组顶部添加/添加元素

rest_framework