html页面载入完毕返回顶部,网页返回顶部的HTML和JavaScript代码实现

废话不多说，直接上代码。

一、使用锚标记

此方法最简单，只需在body下放个隐藏的锚点标记，内容如下：

然后，在网页底部放一个访问链接即可：

返回顶部

此方法效果是一次直接跳到顶部，而且URL地址栏会显示个#top，追求完美的可使用下面方法。

二、使用JS scrollTo函数

javascript scroll函数(scrollBy scrollTo)是用来滚动页面到指定位置，格式定义如下：

scrollBy(xnum,ynum)

scrollTo(xpos,ypos)

其中：

xnum，ynum分别指水平、垂直滚动多少像素，正值表示向右或向下滚动，负值表示向左或向上滚动

xpos，ypos分别指水平和垂直坐标

使用示例：

返回顶部

三、scrollBy慢速滚动返回顶部

本方式使用上面提到的scrollBy函数，每次只滚动定量像素，整体看起来有点滚动效果，代码如下：

1

var sdelay=0;

2

function returnTop() {

3

window.scrollBy(0,-100);//Only for y vertical-axis

4

if(document.body.scrollTop>0) {

5

sdelay= setTimeout(‘returnTop()’,50);

6

}

7

}

scrollBy函数第二个参数我设了-100，越大(比如-10)滚动越慢，越小滚动越快，启动滚动只需在页面底部加个链接：

返回顶部