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 相关文章推荐
基于jquery的direction图片渐变动画效果
May 24 Javascript
jQuery的运行机制和设计理念分析
Apr 05 Javascript
jquery如何改变html标签的样式(两种实现方法)
Jan 16 Javascript
struts2+jquery+json实现异步加载数据(自写)
Jun 24 Javascript
jquery实现html页面 div 假分页有原理有代码
Sep 06 Javascript
jQuery插件expander实现图片翻转特效
May 21 Javascript
实例解析angularjs的filter过滤器
Dec 14 Javascript
详解jQuery lazyload 懒加载
Dec 19 Javascript
canvas实现图像布局填充功能
Feb 06 Javascript
jQuery 实时保存页面动态添加的数据的示例
Aug 14 jQuery
使用Vue.set()方法实现响应式修改数组数据步骤
Nov 09 Javascript
原生JS实现分页
Apr 19 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数组中的重复值的实现代码
2011/07/17 PHP
ThinkPHP之用户注册登录留言完整实例
2014/07/22 PHP
支付宝服务窗API接口开发php版本
2016/07/20 PHP
JAVASCRIPT  THIS详解 面向对象
2009/03/25 Javascript
javascript操作cookie的文章(设置,删除cookies)
2010/04/01 Javascript
jquery 操作DOM的基本用法分享
2012/04/05 Javascript
Web跨浏览器进程通信(Web跨域)
2013/04/17 Javascript
JS打开层/关闭层/移动层动画效果的实例代码
2013/05/11 Javascript
jQuery实现鼠标滚动图片延迟加载效果附源码下载
2016/06/28 Javascript
jquery插件autocomplete用法示例
2016/07/01 Javascript
javascript实现的全国省市县无刷新多级关联菜单效果代码
2016/08/01 Javascript
KnockoutJS 3.X API 第四章之数据控制流foreach绑定
2016/10/10 Javascript
Linux系统中利用node.js提取Word(doc/docx)及PDF文本的内容
2017/06/17 Javascript
利用JS测试目标网站的打开响应速度
2017/12/01 Javascript
js将当前时间格式化为 年-月-日 时:分:秒的实现代码
2018/01/20 Javascript
Javascript实现购物车功能的详细代码
2018/05/08 Javascript
浅谈使用mpvue开发小程序需要注意和了解的知识点
2018/05/23 Javascript
详解用Webpack与Babel配置ES6开发环境
2019/03/12 Javascript
layui 地区三级联动 form select 渲染的实例
2019/09/27 Javascript
浅谈TypeScript 用 Webpack/ts-node 运行的配置记录
2019/10/11 Javascript
vue实现用户长时间不操作自动退出登录功能的实现代码
2020/07/23 Javascript
python实现在无须过多援引的情况下创建字典的方法
2014/09/25 Python
python中Matplotlib实现绘制3D图的示例代码
2017/09/04 Python
Python3实现的Mysql数据库操作封装类
2018/06/06 Python
Python实现将蓝底照片转化为白底照片功能完整实例
2019/12/13 Python
python中for in的用法详解
2020/04/17 Python
英国著名的化妆品折扣网站:Allbeauty.com
2016/07/21 全球购物
Hotels.com中国区:好订网
2016/08/18 全球购物
留学经费担保书
2014/05/12 职场文书
高效课堂标语
2014/06/26 职场文书
2014党员整改措施思想汇报
2014/10/07 职场文书
2014年质量工作总结
2014/11/22 职场文书
2015年酒店客房部工作总结
2015/04/25 职场文书
事业单位工作人员2015年度思想工作总结
2015/10/15 职场文书
2019年行政人事个人工作总结范本!
2019/07/19 职场文书
《进击的巨人》新联动CM 兵长强势出击兽巨人
2022/04/05 日漫