js——頁面回到頂部

zhengyeye發表於2016-06-30
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="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);
    }
}

檔案存放路徑：

基本“回到頂部”效果就這樣子實現，只是我不會在文章中新增動態效果（就是實時的新增這個動態效果圖），求大神賜教！

相關文章