javascript 回到顶部效果的实现

 

 

 

demo.js

 

 

window.onload=function() {
    var timer=null;
    var obtn=document.getElementById('btn');
    var isTop=true;
    window.onscroll=function() {
        if(!isTop) {
            clearInterval(timer);

        }
        isTop=false;
    }

    obtn.onclick=function () {
        timer=setInterval(function(){
            var osTop=document.documentElement.scrollTop||document.body.scrollTop;
            var ispeed=Math.floor(-osTop/5);
            document.documentElement.scrollTop=document.body.scrollTop-=osTop+ispeed;
            isTop=true;
            
            if(osTop==0) {
                clearInterval(timer);
            }

        },30);

    }

}

 

demo.css

 

.box {
    width:1190px;
    margin:  0  auto;
}
#btn {
    width:40px;
    height: 40px;
   position:fixed;
    left:50%;
    bottom:30px;
    background:url(顶部.png)  no-repeat  left top ;
    margin-left: 610px;
}
#btn:hover {
    background:url(顶部.png)  no-repeat  left -40px ;
}

 

　　demo.html

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>回到顶部</title>
    <link rel="stylesheet" type="text/css" href="demo.css">
    <script type="text/javascript" src="demo.js"></script>
</head>
<body>
<div  class="box">
    <img   src="背景.jpg"/>
</div>
<a href="javascript:;"  id="btn"  title="回到顶部"></a>
</body>
</html>

 效果：

 

　　

 

 

 

 

 

 

posted @ 2017-09-06 18:59  1点  阅读(194)  评论(0)  编辑  收藏  举报