JS采用绝对定位实现回到顶部效果完整实例
本文实例讲述了JS采用绝对定位实现回到顶部效果。分享给大家供大家参考，具体如下：
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>绝对定位回到顶部按钮</title>
<styletype="text/css">
body{margin:0px;padding:0px;height:2500px;background:#6f0024;}
#div1{width:120px;height:34px;right:4px;bottom:5px;cursor:pointer;background:url(images/ToTop.png)no-repeat;position:fixed;_position:absolute;display:none;}
</style>
<scripttype="text/javascript">
//绝对定位隐藏显示
functiongetScroll(id){
varobj=document.getElementById(id);
vartimer=null;
positionFixed(obj);
if(obj){
obj.style.display='none';
window.onscroll=function(){
getScrollTop()>0?obj.style.display="block":obj.style.display="none";
}
obj.onclick=function(){
vartimer=setInterval(sMove,10);
functionsMove(){
setScrollTop(getScrollTop()/1.5);
if(getScrollTop()<1)clearInterval(timer);
}
}
}
}
//判断IE6
functionpositionFixed(obj){
variE6=!-[1,]&&!window.XMLHttpRequest;
if(obj){
vartop=obj.offsetTop;
if(iE6){
document.documentElement.style.textOverflow="ellipsis";
obj.style.position="absolute";
obj.style.setExpression("top","eval(documentElement.scrollTop+"+top+')+"px"');
}
}
}
//获取滚动条Top
functiongetScrollTop(){
returndocument.documentElement.scrollTop||document.body.scrollTop;
}
//回到顶部
functionsetScrollTop(value){
document.documentElement.scrollTop=value;
document.body.scrollTop=value;
}
window.onload=function(){
getScroll('div1');
};
</script>
</head>
<body>
<divid="div1"></div>
</body>
</html>
更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。