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


Posted in Javascript onDecember 30, 2016

当页面过长时,通常会在页面下方有一个返回顶部的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中页面返回顶部的方法总结,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript 加号(+)运算符号
Dec 06 Javascript
javascript数字格式化通用类 accounting.js使用
Aug 24 Javascript
jQuery的控件及事件(输入控件及回车事件)使用示例
Jul 25 Javascript
Js base64 加密解密介绍
Oct 11 Javascript
JavaScript设计模式经典之命令模式
Feb 24 Javascript
JavaScript实现Base64编码转换
Apr 23 Javascript
jQuery+ajax读取并解析XML文件的方法
Sep 09 Javascript
JS实现页面数据无限加载
Sep 13 Javascript
JS 设置Cookie 有效期 检测cookie
Jun 15 Javascript
vue.js  父向子组件传参的实例代码
Oct 29 Javascript
关于vue2强制刷新,解决页面不会重新渲染的问题
Oct 29 Javascript
Vue实现简单的跑马灯
May 25 Javascript
jQuery中select与datalist制作下拉菜单时的区别浅析
Dec 30 #Javascript
JS实现全屏的四种写法
Dec 30 #Javascript
js设置文字颜色的方法示例
Dec 30 #Javascript
Node.js的Mongodb使用实例
Dec 30 #Javascript
jQuery实现的仿百度,仿谷歌搜索下拉框效果示例
Dec 30 #Javascript
原生JS实现图片左右轮播
Dec 30 #Javascript
零基础轻松学JavaScript闭包
Dec 30 #Javascript
You might like
THINKPHP+JS实现缩放图片式截图的实现
2010/03/07 PHP
使用session判断用户登录用户权限(超简单)
2013/06/08 PHP
PHP封装的字符串加密解密函数
2015/12/18 PHP
PHP mysqli事务操作常用方法分析
2017/07/22 PHP
动态修改DOM 里面的 id 属性的弊端分析
2008/09/03 Javascript
异步javascript的原理和实现技巧介绍
2012/11/08 Javascript
Javascript 垃圾收集机制介绍理解
2013/05/14 Javascript
关于Javascript作用域链的八点总结
2013/12/06 Javascript
js jquery ajax的几种用法总结(及优缺点介绍)
2014/01/28 Javascript
jquery判断浏览器后退时候弹出消息的方法
2014/08/11 Javascript
JavaScript函数定义的常见注意事项小结
2014/09/16 Javascript
jQuery中:enabled选择器用法实例
2015/01/04 Javascript
jQuery实现菜单感应鼠标滑动动画效果的方法
2015/02/28 Javascript
详细介绍jQuery.outerWidth() 函数具体用法
2015/07/20 Javascript
JS给Textarea文本框添加行号的方法
2015/08/20 Javascript
jquery拖拽排序简单实现方法(效果增强版)
2016/02/16 Javascript
获取jqGrid中选择的行的数据
2016/11/30 Javascript
Angular项目从新建、打包到nginx部署全过程记录
2017/12/09 Javascript
如何使用VuePress搭建一个类型element ui文档
2019/02/14 Javascript
微信小程序开发之map地图组件定位并手动修改位置偏差
2019/08/17 Javascript
three.js 如何制作魔方
2020/07/31 Javascript
[56:41]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 Newbee vs OG
2018/04/01 DOTA
python中 ? : 三元表达式的使用介绍
2013/10/09 Python
Python中最大最小赋值小技巧(分享)
2017/12/23 Python
对pandas数据判断是否为NaN值的方法详解
2018/11/06 Python
django多种支付、并发订单处理实例代码
2019/12/13 Python
诗狄娜化妆品官方网站:Stila Cosmetics
2016/12/21 全球购物
俄罗斯便宜的在线服装商店:GroupPrice
2020/04/10 全球购物
医学毕业生自我鉴定
2013/10/30 职场文书
什么是岗位职责
2013/11/12 职场文书
高中生物教学反思
2014/02/05 职场文书
幼儿园门卫岗位职责
2014/02/14 职场文书
小学教师寄语大全
2014/04/03 职场文书
家长会学生演讲稿
2014/04/26 职场文书
教师工作表现评语
2014/12/31 职场文书
Java 多态分析
2022/04/26 Java/Android