欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-06-11 08:36:23
当页面过长时,通常会在页面下方有一个返回顶部的button,总结一下,大概三种实现方法,下面说下各方法及优缺点。 方法一 锚点定位 ? 1 返回頂部 ? 1 返 ......

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

方法一

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

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

方法二 window.scrollto(x,y)

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

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

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

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

原生方法

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
/* 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) {
   padding: 0px 0px 0px 5px; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-left: 3px solid rgb(108, 226, 108); line-height: 20px; width: 640px; clear: both; outline: 0px !important; border-radius: 0px !important; border-top: 0px !important; border-right: 0px !important; border-bottom: 0px !important; border-image: initial !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; overflow: visible !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; box-sizing: content-box !important; font-family: consolas, "bitstream vera sans mono", "courier new", courier, monospace !important; min-height: auto !important; color: gray !important;">#8ae238;
}
div:nth-child(even) {
   padding: 0px 0px 0px 5px; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-left: 3px solid rgb(108, 226, 108); line-height: 20px; width: 640px; clear: both; outline: 0px !important; border-radius: 0px !important; border-top: 0px !important; border-right: 0px !important; border-bottom: 0px !important; border-image: initial !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; overflow: visible !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; box-sizing: content-box !important; font-family: consolas, "bitstream vera sans mono", "courier new", courier, monospace !important; min-height: auto !important; color: gray !important;">#66d9ef;
}
.top {
  position: fixed;
  right: 50px;
  bottom: 50px;
  display: block;
  width: 50px;
  height: 50px;
  font-size: 20px;
  
  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代码部分不同,具体代码如下

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<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的方法更适合大多数场景。