UDN-企业互联网技术人气社区

板块导航

浏览  : 718
回复  : 4

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

[复制链接]
genie1003的头像 楼主
发表于 2017-1-9 15:23:03 | 显示全部楼层 |阅读模式
  当页面过长时,通常会在页面下方有一个返回顶部的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)的点处在视口的左上角。

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

  原生方法
  1. /* html部分 */
  2. <body>
  3. <div></div>
  4. <div></div>
  5. <div></div>
  6. <div></div>
  7. <div></div>
  8. <div></div>
  9. <div></div>
  10. <div></div>
  11. <div></div>
  12. <a href="JavaScript:;" class="top" id="top">返回頂部</a>
  13. </body>
  14. <style>
  15. /* css部分 */
  16. div {
  17.     height: 150px;
  18. }
  19. div:nth-child(odd) {
  20.     background-color: #8ae238;
  21. }
  22. div:nth-child(even) {
  23.     background-color: #66d9ef;
  24. }
  25. .top {
  26.     position: fixed;
  27.     right: 50px;
  28.     bottom: 50px;
  29.     display: block;
  30.     width: 50px;
  31.     height: 50px;
  32.     font-size: 20px;
  33.     background-color: white;
  34.     display: none;
  35. }
  36. </style>
  37. <script>
  38. /* js代码 */
  39.     var topBtn = document.getElementById('top');
  40.     // 获取视窗高度
  41.     var winHeight = document.documentElement.clientHeight;
  42.     window.onscroll = function () {
  43.         // 获取页面向上滚动距离,chrome浏览器识别document.body.scrollTop,而火狐识别document.documentElement.scrollTop,这里做了兼容处理
  44.         var toTop = document.documentElement.scrollTop || document.body.scrollTop;
  45.         // 如果滚动超过一屏,返回顶部按钮出现,反之隐藏
  46.         if(toTop>=winHeight){
  47.             topBtn.style.display = 'block';
  48.         }else {
  49.             topBtn.style.display = 'none';
  50.         }
  51.     }
  52.     topBtn.onclick=function () {
  53.         var timer = setInterval(function () {
  54.             var toTop = document.documentElement.scrollTop || document.body.scrollTop;
  55.             // 判断是否到达顶部,到达顶部停止滚动,没到达顶部继续滚动
  56.             if(toTop == 0){
  57.                 clearInterval(timer);
  58.             }else {
  59.                 // 设置滚动速度
  60.                 var speed = Math.ceil(toTop/5);
  61.                 // 页面向上滚动
  62.                 document.documentElement.scrollTop=document.body.scrollTop=toTop-speed;
  63.             }
  64.         },50);
  65.     }
  66. </script>
复制代码

  大概的思路就是:

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

  jQuery方法

  jQuery方法只是在js代码部分不同,具体代码如下
  1. <script>
  2. /* js代码 */
  3. $(window).on('scroll', function () {
  4.     // 判断显示还是隐藏按钮
  5.     if($(this).scrollTop()>=$(this).height()){
  6.         $('#top').fadeIn('slow');
  7.     }else {
  8.         $('#top').fadeOut('slow');
  9.     }

  10. });
  11. $('#top').on('click',function () {
  12.     // 设置滚动动画,这里注意使用的是$('body')不是$(window)
  13.     $('body').animate({scrollTop:'0'},500);
  14. });
  15. </script>
复制代码

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

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

  总结

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

相关帖子

发表于 2017-1-9 15:23:32 | 显示全部楼层
感觉JavaScript很有前途
使用道具 举报

回复

发表于 2017-1-9 15:23:33 | 显示全部楼层
个人觉得js是一种解释性语言,它提供了一个非常方便的开发过程,不需要编译,js与HTML标识结合在一起,从而方便用户的使用操作。
使用道具 举报

回复

发表于 2017-1-9 15:23:35 | 显示全部楼层
回帖支持下楼主,请眼熟我,我叫“冷面枪王“
使用道具 举报

回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于我们
联系我们
  • 电话:010-86393388
  • 邮件:udn@yonyou.com
  • 地址:北京市海淀区北清路68号
移动客户端下载
关注我们
  • 微信公众号:yonyouudn
  • 扫描右侧二维码关注我们
  • 专注企业互联网的技术社区
版权所有:用友网络科技股份有限公司82041 京ICP备05007539号-11 京公网网备安1101080209224 Powered by Discuz!
快速回复 返回列表 返回顶部