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

 當載入頁面時，“回到頂部” 預設不顯示，當拖滾動條後動態顯示；當點擊 “回到頂部” 時，勻減速回到頂部。

　　佈局效果如下：

 1、首先在設置中的“頁面定製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;
        }

2、然後在“博客側邊欄公告（支持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>