页面返回顶部方法大全，其中优劣按需所取

对于页面过长的返回顶部非常的必要，下面是返回顶部方法，各有优劣，按需所取吧。

一、锚标记返回页面顶部 ，简单的静态返回顶部，一般用在固定在页面底部的情况

命名锚标记：<a name="top" id="top"></a>

页面底部的返回代码:<a href="#top" target="_self">返回顶部</a>

还可以简单的:<a href="#">返回顶部</a>

二、JS的Scroll函数返回顶部

scrooll函数控制滚动条的位置：<a href="javascript:scroll(0,0)">返回顶部</a>

三、JS模拟滚动效果上滑至顶部：

js代码：

function pageScroll(){
    //把内容滚动指定的像素数（第一个参数是向右滚动的像素数，第二个参数是向下滚动的像素数）
    window.scrollBy(0,-100);
    //延时递归调用，模拟滚动向上效果
    scrolldelay = setTimeout(’pageScroll()’,100);
    //获取scrollTop值，声明了DTD的标准网页取document.documentElement.scrollTop，否则取document.body.scrollTop；因为二者只有一个会生效，另一个就恒为0，所以取和值可以得到网页的真正的scrollTop值
    var sTop=document.documentElement.scrollTop+document.body.scrollTop;
    //判断当页面到达顶部，取消延时代码（否则页面滚动到顶部会无法再向下正常浏览页面）
    if(sTop==0) clearTimeout(scrolldelay);
}

<a onclick="pageScroll()">返回顶部</a>

四、浮动于页面位置，随时可返回顶部，JS实现

这个方式也是本站使用的返回顶部代码，简单，好用。点击去看更详细的描述。

代码如下：

<script type="text/javascript">
var imgurl = "/img/totop.png";
var w = 45; //bubufx提示：离右侧距离
var h = 200; //bubufx提示：离底部距离
var wW = document.body.clientWidth; //bubufx提示：获得当前页面宽度
if (wW > 1000) //bubufx提示：页面宽度大于1000时贴在内容旁边
w = (wW - 1000) / 2 - 5;
var str = "";
var obj = document.getElementById("divStayTopLeft");
if (obj) str = obj.innerHTML;
if (typeof document.compatMode != ’undefined’ && document.compatMode != ’BackCompat’) {
document.writeln(’<DIV style="z-index:9;right:0;bottom:0;height:’ + h + ’px;width:’ + w + ’px;overflow:hidden;POSITION:fixed;_position:absolute; _margin-top:expression(document.documentElement.clientHeight-this.style.pixelHeight+document.documentElement.scrollTop);">’);
}
else {
document.writeln(’<DIV style="z-index:9;right:0;bottom:0;height:’ + h + ’px;width:’ + w + ’px;overflow:hidden;POSITION:fixed;*position:absolute; *top:expression(eval(document.body.scrollTop)+eval(document.body.clientHeight)-this.style.pixelHeight);">’);
}
document.writeln(’<div style="clear:both;margin:auto;height:59px;font-size:16px;overflow:hidden;font-weight:bold;text-align:left;"><a href="javascript:scroll(0,0)" hidefocus="true"><img src="’ + imgurl + ’" width="42" height="42" alt="回到布布分享顶部" style="border: 0px;" /></a></div> ’);
document.write(’<div style="clear:both;margin:auto;overflow:hidden;text-align:left;">’ + str + ’</div>’);
document.writeln(’</DIV>’); 
</script>
 

页面返回顶部方法大全，其中优劣按需所取