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 相关文章推荐
User Scripts: Video Download by User Scripts
May 14 Javascript
Javascript中正则表达式的全局匹配模式分析
Apr 26 Javascript
jQuery源码分析-01总体架构分析
Nov 14 Javascript
js禁止页面刷新禁止用F5键刷新禁止右键的示例代码
Sep 23 Javascript
JS遍历Json字符串中键值对先转成JSON对象再遍历
Aug 15 Javascript
PHPExcel中的一些常用方法汇总
Jan 23 Javascript
关于javascript原型的修改与重写(覆盖)差别详解
Aug 31 Javascript
jQuery控制控件文本的长度的操作方法
Dec 05 Javascript
深入理解Javascript中的观察者模式
Feb 20 Javascript
JavaScript定义函数的三种实现方法
Sep 23 Javascript
浅析前端路由简介以及vue-router实现原理
Jun 01 Javascript
axios对请求各种异常情况处理的封装方法
Sep 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
用PHP调用数据库的存贮过程
2006/10/09 PHP
php 在线打包_支持子目录
2008/06/28 PHP
php网页标题中文乱码的有效解决方法
2014/03/05 PHP
Yii框架自定义数据库操作组件示例
2019/11/11 PHP
THINKPHP5分页数据对象处理过程解析
2020/10/28 PHP
Javascript 兼容firefox的一些问题
2009/05/21 Javascript
详解JavaScript中undefined与null的区别
2014/03/29 Javascript
jQuery实现表格行上移下移和置顶的方法
2015/05/22 Javascript
JS实现兼容各种浏览器的高级拖动方法完整实例【测试可用】
2016/06/21 Javascript
Vue.js实战之Vuex的入门教程
2017/04/01 Javascript
利用forever和pm2部署node.js项目过程
2017/05/10 Javascript
vue学习之mintui picker选择器实现省市二级联动示例
2017/10/12 Javascript
vue动态改变背景图片demo分享
2018/09/13 Javascript
layui实现二维码弹窗、并下载到本地的方法
2019/09/25 Javascript
微信小程序实用代码段(收藏版)
2019/12/17 Javascript
python字典get()方法用法分析
2015/04/17 Python
浅谈django中的认证与登录
2016/10/31 Python
Python3实现抓取javascript动态生成的html网页功能示例
2017/08/22 Python
windows下python之mysqldb模块安装方法
2017/09/07 Python
Python抓取聚划算商品分析页面获取商品信息并以XML格式保存到本地
2018/02/23 Python
用vue.js组件模拟v-model指令实例方法
2019/07/05 Python
jenkins配置python脚本定时任务过程图解
2019/10/29 Python
python实现大战外星人小游戏实例代码
2019/12/26 Python
Pytorch 搭建分类回归神经网络并用GPU进行加速的例子
2020/01/09 Python
解决tensorboard多个events文件显示紊乱的问题
2020/02/15 Python
PyCharm永久激活方式(推荐)
2020/09/22 Python
如何使用Python调整图像大小
2020/09/26 Python
css3实现元素环绕中心点布局的方法示例
2019/01/15 HTML / CSS
法拉利英国精品店:Ferraris Boutique UK
2019/07/20 全球购物
美国办公用品折扣网站:Shoplet.com
2019/11/24 全球购物
相亲活动方案
2014/08/26 职场文书
缓刑人员思想汇报
2014/10/11 职场文书
2014财务部年度工作总结
2014/12/08 职场文书
实习介绍信模板
2015/01/30 职场文书
关于SpringBoot 使用 Redis 分布式锁解决并发问题
2021/11/17 Redis
netty 实现tomcat的示例代码
2022/06/05 Servers