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="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>
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
