用 js 實現博客園的 「回到頂部」 功能——簡易實用~~~

 當加載頁面時，「回到頂部」 默認不顯示，當拖滾動條後動態顯示；當點擊 「回到頂部」 時，勻減速回到頂部。

　　佈局效果以下：

　　

 

 一、首先在設置中的「頁面定製CSS代碼」中，添加以下css代碼（也能夠修改爲本身喜歡的樣式噢~）：

.returntop{
            height:85px;width:30px;background:deepskyblue;position: fixed;bottom:0;right:22px;
            text-align: center;color:white;cursor: pointer;border-radius:6px;font-size:16px;display:none;
        }

 

二、而後在「博客側邊欄公告（支持HTML代碼）（支持JS代碼）」中，添加以下js代碼（前提是要申請js的運行權限噢~）。

<script>
    var returntop=document.createElement("div");
    returntop.className="returntop";
    returntop.innerText="回到頂部";
    document.body.appendChild(returntop);
    var returntimer=null;
    var isuser=true;

    window.onscroll=function(){
        var scroll=document.documentElement.scrollTop||document.body.scrollTop;
        if(scroll>300){
            returntop.style.display="block";
        }
        if(scroll<300){
            returntop.style.display="none";
        }
        if(!isuser){
            clearInterval(returntimer);
        }
        isuser=false;
    };
    returntop.onclick=function(){
        returntimer=setInterval(function(){
            var scroll=document.documentElement.scrollTop||document.body.scrollTop;
            var speed=Math.floor(-scroll/8);
            if(scroll==0){
                clearInterval(returntimer);
            }
            isuser=true;
            document.documentElement.scrollTop=document.body.scrollTop=scroll+speed;
        },30);
    }
</script>