有时候网页太长,我们想要回到网页顶部很麻烦。
这时候我们需要一个返回顶部的效果。
要实现返回顶部,有很多方法。
1.使用HTML的锚标记是最简单的方法。
但是缺点是样式不好看
例子:<a href="top" id='top'></a> 标签只要靠近顶部就行
<a href='#top' target='_self'>返回顶部</a>
2.使用Scroll函数返回顶部
scrooll函数用来控制滚动条的位置,有两种很简单的实现方式:
(1):
返回顶部
scroll第一个参数是水平位置,第二个参数是垂直位置,比如要想定位在垂直520像素处,改成scroll(0,520)就可以了。
(2)缓慢向上:
这个方法是渐进式的返回顶部,比上一种好看一些:
例子:
functionpageScroll() {window.scrollBy(0,-10);scrolldelay=setTimeout('pageScroll()',100);}
<a href="pageScroll()">返回顶部</a>
这样就会动态返回顶部,只不过虽返回顶部但是代码仍在运行,还需要停止掉。
if(document.documentElement.scrollTop==0)clearTimeout(scrolldelay)
3.用JQuery动画来实现
这里用到了jquery的自定义动画来实现功能
$('html, body').animate({ scrollTop: 0 },'fast')
4.不用动画的jQuery
例子:
$('html,body').scrollTop(0);
5.纯js 无动画版本
window.scrollTo(0,0)
6.纯js 动画版本
生硬版:
varscrollToTop=window.setInterval(function() {
varpos=window.pageYOffset;
if ( pos>0 ) {
window.scrollTo( 0, pos - 20 ); // how far to scroll on each step
} else {
window.clearInterval( scrollToTop );
}
}, 16); // how fast to scroll (this equals roughly 60 fps)
流畅版:
(function smoothscroll(){
varcurrentScroll=document.documentElement.scrollTop || document.body.scrollTop;
if (currentScroll>0) {
window.requestAnimationFrame(smoothscroll);
window.scrollTo (0,currentScroll - (currentScroll/5));
}
})();
网友评论