当前位置:首页 >> 网络编程

jquery实现点击页面回到顶部

a)下面看看实现,实现很简单,通过JQ判断滚动条向下滚动的长度大于多少时显示【回到顶部+回到首页】的图标(换一种理解:滚动条顶端距离页面顶部的距离),另外一种实现方法,就是通过锚标记,很好理解,就是标记一个位置,事件激活时,给我回到这个位置

b)JQ判断滚动条向下滚动的长度大于多少时,这个方法,也可以用来做页面的自动加载...就是你不停滚动,数据就不停加载...用户体验很好的喔【有时间就写】

1)首先我们写好DOM结构、写好CSS样式表

/* 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 */
      .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;
   }

2)来看看实现代码

  <script type="text/javascript" src="/UploadFiles/2021-04-02/jquery-1.8.3.min.js">

3)这是效果图

jquery实现点击页面回到顶部

总结:一定注意是否引用了JQ类库。

以上就是本文的全部内容,希望对大家有所帮助,谢谢对的支持!