js——页面回到顶部

很久都没有去慕课网学习学习了，刚恰好就看见了一个用的比较多的小例子——页面回到顶部，记得之前自己也是在初学web时，被这个坑了一回，因此今天特地拿来分享分享……

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>页面回到顶部</title>

    <link rel="stylesheet" type="text/css" href="mycss.css">

    <script type="text/javascript" src="myjs.js"></script>

</head>

<body>

    <a href="javascript:;" id="btn" title="回到顶部"></a>

    <div class="bg">

        <img src="data:images/tb_bg.jpg" alt="" />

    </div>

</body>

</html>

其中需要引入自己写的一个样式文件和一个js文件：

    #btn {

        width: 40px;

        height: 40px;

        position: fixed;

        display: none;

        right: 65px;

        bottom: 10px;

        background: url(images/top_bg.png) no-repeat left top;

    }

    #btn:hover {

        background: url(images/top_bg.png) no-repeat 0 -39px;

    }

    .bg {

        width: 1190px;

        margin: 0 auto;

    }

js文件：

//页面加载完毕后触发

window.onload = function() {

    var obtn = document.getElementById('btn');

    var clientHeight=document.documentElement.clientHeight;//获取页面可视区域的高度

    var timer = null; //存放定时器

    var isTop=true;

    //滚动条滚动时触发

    window.onscroll=function(){

        var osTop = document.documentElement.scrollTop || document.body.scrollTop;

        if(osTop>=clientHeight){

            obtn.style.display="block";

        }else{

            obtn.style.display="none";

        }

        if(!isTop){

            clearInterval(timer);

        }

        isTop=false;

    }

    obtn.onclick = function() {

        timer = setInterval(function() { //设置定时器

            //获取滚动条距离顶部的高度

            var osTop = document.documentElement.scrollTop || document.body.scrollTop;

            var ispeed=osTop/5;

            document.documentElement.scrollTop = document.body.scrollTop =osTop-ispeed;

            isTop=true;

            if(osTop==0){

                clearInterval(timer);

            }

        }, 30);

    }

}

文件存放路径：

js——页面回到顶部

基本“回到顶部”效果就这样子实现，只是我不会在文章中添加动态效果（就是实时的添加这个动态效果图），求大神赐教！

秒客网

js——页面回到顶部

相关文章