Javascript 实现回到顶部效果

时间：2015-08-17 15:18:05 阅读：127 评论：0 收藏：0 [点我收藏+]

标签：

html文件代码：

<!DOCTYPE html>
<html>
<head>

    <title></title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script type="text/javascript" src="script.js"></script>
</head>
<body>
    <div class="box">
        <img src="bg.png">    
    </div>
    <a href="javascript:;" id="btn" title="回到顶部"></a>
</body>
</html>

css文件代码：

.box{
    width: 999px;     
    margin: 0 auto;
}
#btn{
    width: 40px;
    height: 40px;
    display: none;  /*默认不显示回到顶部图标*/
    position: fixed;
    left: 50%;
    margin-left: 470px;
    bottom: 30px;
    background:url(back_top.png) no-repeat left top;/*背景图的位置是从元素的左上方开始显示*/
}
#btn:hover{
    background:url(back_top.png) no-repeat left -40px;  /*鼠标放到回到顶部链接时改变的样式
}

回到顶端图标：

技术分享

JS文件代码：

//页面渲染完触发
window.onload = function(){
    var obtn = document.getElementById(‘btn‘);
    var clientHeight = document.documentElement.clientHeight;//获取内容可视区域高度（视口高度）
    var timer = null;
    
    //滚动轴滚动时触发
    window.onscroll = function(){
        var osTop = document.documentElement.scrollTop||document.body.scrollTop;//获取滚动轴垂直偏移，后半部分为兼容谷歌浏览器
        //当滚动轴垂直偏移大于等于视口高度时显示回到顶端图标   
        if (osTop >= clientHeight) {
            obtn.style.display = ‘block‘;
        }else{
            obtn.style.display = ‘none‘;
        };
    }

    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;//回到顶端的速度不断减缓
                if (osTop == 0) {
                    clearInterval(timer); //回到顶端时清除计时器
                };
        },30);
    }
}