首页 > 代码库 > JS-DOM：基础实操---点击回到顶部
JS-DOM：基础实操---点击回到顶部
CSS部分
<style type="text/css">
body{
height: 3000px;
}
#div1{
height: 100px;
width: 100px;
background-color: #ccc;
position: fixed;
right: 0;
bottom: 0;
}
</style>
HTML部分
<body>
<div id="div1"></div>
ul>li{$}*50--->Tab
</body>
JS-DOM部分
<script type="text/javascript" src="http://www.mamicode.com/tween.js"></script>
<script>
window.onload=function(){
var oDiv=document.getElementById("div1");
function move(){
if(window.navigator.uesrAgent.indexOf("MSIE 6")!=-1){
var bodyScrollTop=document.documentElement.scrollTop;
var scrollBottom=document.documentElement.clientHeight-oDiv.offsetHeight+bodyScrollTop;
oDiv.style.position="absolute";
oDiv.style.top=scrollBottom+"px";
}
}
move();
window.onscroll=window.onresize=function(){
move();
}
var timer=null;
oDiv.onclick=function(){
var start=document.documentElement.scrollTop||document.body.scrollTop;
var end=0;
var change=end-start;
var t=0;
var endT=20;
clearInterval(timer);
timer=setInterval(function(){
t++;
if(t==endT){
clearInterval(timer);
}
document.body.scrollTop=Tween.Bounce.easeOut(t,start,change,endT);
document.documentElement.scrollTop=Tween.Bounce.easeOut(t,start,change,endT);
},30);
}
}
</script>