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 相关文章推荐
EasySlider 基于jQuery功能强大简单易用的滑动门插件
Jun 11 Javascript
关于jQuery中.attr()和.prop()的问题探讨
Sep 06 Javascript
jquery简单的弹出层浮动层代码
Apr 27 Javascript
JavaScript模块规范之AMD规范和CMD规范
Oct 27 Javascript
jQuery.ajax 跨域请求webapi设置headers的解决方案
Aug 08 Javascript
node+express制作爬虫教程
Nov 11 Javascript
JavaScript实现替换字符串中最后一个字符的方法
Mar 07 Javascript
JavaScript 隐性类型转换步骤浅析
Mar 15 Javascript
详解vue-loader在项目中是如何配置的
Jun 04 Javascript
微信小程序基于canvas渐变实现的彩虹效果示例
May 03 Javascript
浅谈vue中get请求解决传输数据是数组格式的问题
Aug 03 Javascript
JavaScript canvas实现雨滴特效
Jan 10 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
便携利器 — TECSUN PL-365简评
2021/03/02 无线电
PHP 高手之路(二)
2006/10/09 PHP
PHP删除数组中的特定元素的代码
2012/06/28 PHP
PHP获取当前页面完整URL的实现代码
2013/06/10 PHP
探讨Hessian在PHP中的使用分析
2013/06/13 PHP
jQuery 动画基础教程
2008/12/25 Javascript
Javascript var变量隐式声明方法
2009/10/19 Javascript
下载网站打开页面后间隔多少时间才显示下载链接地址的代码
2010/04/25 Javascript
jquery可见性过滤选择器使用示例
2013/06/24 Javascript
一个检测表单数据的JavaScript实例
2014/10/31 Javascript
js密码强度实时检测代码
2016/03/02 Javascript
微信小程序左滑删除效果的实现代码
2017/02/20 Javascript
jquery在vue脚手架中的使用方式示例
2017/08/29 jQuery
67 个节约开发时间的前端开发者的工具、库和资源
2017/09/12 Javascript
简单谈谈js的数据类型
2017/09/25 Javascript
vue异步axios获取的数据渲染到页面的方法
2018/08/09 Javascript
vue动画之点击按钮往上渐渐显示出来的实例
2018/09/29 Javascript
vue中watch的用法汇总
2020/12/28 Vue.js
基于JavaScript实现简单扫雷游戏
2021/01/02 Javascript
python中的多重继承实例讲解
2014/09/28 Python
Django自定义用户登录认证示例代码
2019/06/30 Python
python数组循环处理方法
2019/08/26 Python
Python中求对数方法总结
2020/03/10 Python
windows上彻底删除jupyter notebook的实现
2020/04/13 Python
keras训练浅层卷积网络并保存和加载模型实例
2020/07/02 Python
Python操作MySQL数据库的示例代码
2020/07/13 Python
html5实现图片转圈的动画效果——让页面动起来
2017/10/16 HTML / CSS
使用html2canvas实现将html内容写入到canvas中生成图片
2020/01/03 HTML / CSS
DBA数据库管理员JAVA程序员架构师必看
2016/02/07 面试题
服务生自我鉴定
2014/01/22 职场文书
党员学习正风肃纪思想汇报
2014/09/12 职场文书
带刀到教室的检讨书
2014/10/04 职场文书
80后婚前协议书范本
2014/10/24 职场文书
2015年初中元旦晚会活动总结
2014/11/28 职场文书
python 实现mysql自动增删分区的方法
2021/04/01 Python
Tomcat安装使用及部署Web项目的3种方法汇总
2022/08/14 Servers