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

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

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

命名锚标记:<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>
 


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

上一篇:C#的DES加密解密算法for vs2005


下一篇:html中用js获取页面或屏幕的宽度及高度以及屏幕分辨率