富贵资源网 Design By www.hznty.com
当页面过长时,通常会在页面下方有一个返回顶部的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中页面返回顶部的方法总结,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
富贵资源网 Design By www.hznty.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
富贵资源网 Design By www.hznty.com
暂无评论...