返回顶部的几种方法

有时候网页太长，我们想要回到网页顶部很麻烦。

这时候我们需要一个返回顶部的效果。

要实现返回顶部，有很多方法。

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.setInt(。)erval(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));

}

})();

本文标题：返回顶部的几种方法 - 明星
本文地址：www.0351net.com/xxs/mingxing/142201.html