码迷,mamicode.com
首页 > Web开发 > 详细

JS-DOM:基础实操---点击回到顶部

时间:2014-08-06 18:33:01      阅读:220      评论:0      收藏:0      [点我收藏+]

标签:style   color   java   os   io   strong   art   ar   

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>

JS-DOM:基础实操---点击回到顶部,布布扣,bubuko.com

JS-DOM:基础实操---点击回到顶部

标签:style   color   java   os   io   strong   art   ar   

原文地址:http://www.cnblogs.com/lxbchengxunyuan/p/3895001.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!