当前位置: 首页 > 编程笔记 >

jQuery中页面返回顶部的方法总结

楚宪
2023-03-14
本文向大家介绍jQuery中页面返回顶部的方法总结,包括了jQuery中页面返回顶部的方法总结的使用技巧和注意事项,需要的朋友参考一下

当页面过长时,通常会在页面下方有一个返回顶部的button,总结一下,大概三种实现方法,下面说下各方法及优缺点。

方法一 锚点定位

<a href="#" class="top" id="top">返回頂部</a>

这种方法设置方便,但缺点是会刷新页面(我是在同事的乐视手机上发现的)。

方法二 window.scrollTo(x,y)

<a href="javascript:scrollTo(0,0)" class="top" id="top">返回頂部</a>

这种方法也很方便,并且不会刷新页面,缺点是没有滚动效果。

scrollTo接收的参数用来定位视口左上角在整个滚动内容区域的坐标,比如我设置scrollTo(100,100),就是让滚动内容的坐标(100,100)的点处在视口的左上角。

方法三 设置带有动画效果的滚动

原生方法

/* html部分 */
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<a href="javascript:;" class="top" id="top">返回頂部</a>
</body>
<style>
/* css部分 */
div {
  height: 150px;
}
div:nth-child(odd) {
  background-color: #8ae238;
}
div:nth-child(even) {
  background-color: #66d9ef;
}
.top {
  position: fixed;
  right: 50px;
  bottom: 50px;
  display: block;
  width: 50px;
  height: 50px;
  font-size: 20px;
  background-color: white;
  display: none;
}
</style>
<script>
/* js代码 */
  var topBtn = document.getElementById('top');
  // 获取视窗高度
  var winHeight = document.documentElement.clientHeight;
  window.onscroll = function () {
    // 获取页面向上滚动距离,chrome浏览器识别document.body.scrollTop,而火狐识别document.documentElement.scrollTop,这里做了兼容处理
    var toTop = document.documentElement.scrollTop || document.body.scrollTop;
    // 如果滚动超过一屏,返回顶部按钮出现,反之隐藏
    if(toTop>=winHeight){
      topBtn.style.display = 'block';
    }else {
      topBtn.style.display = 'none';
    }
  }
  topBtn.onclick=function () {
    var timer = setInterval(function () {
      var toTop = document.documentElement.scrollTop || document.body.scrollTop;
      // 判断是否到达顶部,到达顶部停止滚动,没到达顶部继续滚动
      if(toTop == 0){
        clearInterval(timer);
      }else {
        // 设置滚动速度
        var speed = Math.ceil(toTop/5);
        // 页面向上滚动
        document.documentElement.scrollTop=document.body.scrollTop=toTop-speed;
      }
    },50);
  }
</script>

大概的思路就是:

为window绑定scroll事件,监听页面滚动距离,当超过一屏高度时,显示返回顶部的按钮

为按钮绑定点击事件,返回顶部的方法就是获取页面滚动的距离,然后计算步长,这里采用滚动距离除以5的方式,滚动速度由快到慢。这里使用定时器控制滚动的频率,建议设置较小一点的值,如果时间间隔过大会有‘跳帧'的感觉。
这种方法优点是有了动画效果,只是实现起来比较麻烦,下面介绍一下jQuery方法。

jQuery方法

jQuery方法只是在js代码部分不同,具体代码如下

<script>
/* js代码 */
$(window).on('scroll', function () {
  // 判断显示还是隐藏按钮
  if($(this).scrollTop()>=$(this).height()){
    $('#top').fadeIn('slow');
  }else {
    $('#top').fadeOut('slow');
  }
});
$('#top').on('click',function () {
  // 设置滚动动画,这里注意使用的是$('body')不是$(window)
  $('body').animate({scrollTop:'0'},500);
});
</script>

jQuery方法的优点是方便,而且动画效果比较流畅。

这里需要注意设置animate方法时使用的是jQuery封装的body对象而不是window对象,因为我们是要设置body的scrollTop属性。

总结

三个方法各有优劣,不过总体来讲,jQuery的方法更适合大多数场景。

以上所述是小编给大家介绍的jQuery中页面返回顶部的方法总结,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对小牛知识库网站的支持!

 类似资料:
  • 由于我不能再使用复选框技巧,我不得不使用

  • 本文向大家介绍jQuery实现返回顶部效果的方法,包括了jQuery实现返回顶部效果的方法的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了jQuery实现返回顶部效果的方法。分享给大家供大家参考。具体实现方法如下: 1、首先是CSS样式: 2、接着是jquery代码:(要引入jQuery核心库) 3、引用页面: 希望本文所述对大家的jQuery程序设计有所帮助。

  • 本文向大家介绍jquery实现页面常用的返回顶部效果,包括了jquery实现页面常用的返回顶部效果的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了jquery实现返回顶部效果的全部代码,供大家参考,具体内容如下 效果图: 实现代码: 希望本文所述对大家学习javascript程序设计有所帮助。

  • 本文向大家介绍jquery实现点击页面回到顶部,包括了jquery实现点击页面回到顶部的使用技巧和注意事项,需要的朋友参考一下 a)下面看看实现,实现很简单,通过JQ判断滚动条向下滚动的长度大于多少时显示【回到顶部+回到首页】的图标(换一种理解:滚动条顶端距离页面顶部的距离),另外一种实现方法,就是通过锚标记,很好理解,就是标记一个位置,事件激活时,给我回到这个位置 b)JQ判断滚动条向下滚动的长

  • 本文向大家介绍jquery 实现返回顶部功能,包括了jquery 实现返回顶部功能的使用技巧和注意事项,需要的朋友参考一下 今天搞了一个回到顶部的JS JQ功能,废话不多说,有图有真相! 代码很简单,各位直接拿去,放在自己项目中即可,如有bug请给我留言,共同完善 方法二: 主要参数: scrollName: 'scrollUp', // Element ID topDistance: '300'

  • 本文向大家介绍javascript返回顶部的按钮实现方法,包括了javascript返回顶部的按钮实现方法的使用技巧和注意事项,需要的朋友参考一下 本文实例介绍了javascript返回顶部的按钮实现方法,分享给大家供大家参考,具体内容如下 html: css: script: 获取滚动条高度:document.documentElement.scrollTop || document.body.