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实现页面自适应
Jan 19 Javascript
javascript 面向对象,实现namespace,class,继承,重载
Oct 29 Javascript
jQuery Selector选择器小结
May 06 Javascript
基于jquery的划词搜索实现(备忘)
Sep 14 Javascript
基于JQuery的Select选择框的华丽变身
Aug 23 Javascript
javascript与cookie 的问题详解
Nov 11 Javascript
Vuex利用state保存新闻数据实例
Jun 28 Javascript
改变vue请求过来的数据中的某一项值的方法(详解)
Mar 08 Javascript
实例详解vue.js浅度监听和深度监听及watch用法
Aug 16 Javascript
JavaScript实现学生在线做题计时器功能
Dec 05 Javascript
在layui中layer弹出层点击事件无效的解决方法
Sep 05 Javascript
Node.js之删除文件夹(含递归删除)代码实例
Sep 09 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
PHP读取文件内容后清空文件示例代码
2014/03/18 PHP
thinkphp5实现无限级分类
2019/02/18 PHP
thinkphp5.1框架容器与依赖注入实例分析
2019/07/23 PHP
通过PHP的Wrapper无缝迁移原有项目到新服务的实现方法
2020/04/02 PHP
防止网站内容被拷贝的一些方法与优缺点好处与坏处分析
2007/11/30 Javascript
javascript中的new使用
2010/03/20 Javascript
JavaScript调用后台的三种方法实例
2013/10/17 Javascript
angularjs实现文字上下无缝滚动特效代码
2016/09/04 Javascript
使用BootStrap建立响应式网页——通栏轮播图(carousel)
2016/12/21 Javascript
AngularJS $http模块POST请求实现
2017/04/08 Javascript
JavaScript瀑布流布局实现代码
2017/05/06 Javascript
关于使用axios的一些心得技巧分享
2017/07/02 Javascript
详细AngularJs4的图片剪裁组件的实例
2017/07/12 Javascript
VUE axios上传图片到七牛的实例代码
2017/07/28 Javascript
微信小程序实现动态设置placeholder提示文字及按钮选中/取消状态的方法
2017/12/14 Javascript
EasyUI的DataGrid绑定Json数据源的示例代码
2017/12/16 Javascript
vue项目刷新当前页面的三种方法
2018/12/04 Javascript
小程序怎样让wx.navigateBack更好用的方法实现
2019/11/01 Javascript
vue中el-input绑定键盘按键(按键修饰符)
2020/07/22 Javascript
Vue表单提交点击事件只允许点击一次的实例
2020/10/23 Javascript
Python神奇的内置函数locals的实例讲解
2019/02/22 Python
如何实现Django Rest framework版本控制
2019/07/25 Python
基于Python解密仿射密码
2019/10/21 Python
Python操作Word批量生成合同的实现示例
2020/08/28 Python
英国领先的运动营养品牌:Protein Dynamix
2018/01/02 全球购物
锐步英国官网:Reebok英国
2019/11/29 全球购物
接口的多继承会带来哪些问题
2015/08/17 面试题
法律工作求职自荐信
2013/10/31 职场文书
少先队入队活动方案
2014/02/08 职场文书
幼儿园优秀教师事迹
2014/02/13 职场文书
cf战队宣传语
2015/07/13 职场文书
运动会通讯稿600字
2015/07/20 职场文书
婚宴来宾致辞
2015/07/28 职场文书
运动会200米广播稿
2015/08/19 职场文书
用php如何解决大文件分片上传问题
2021/07/07 PHP
关于maven依赖 ${xxx.version}报错问题
2022/01/18 Java/Android