用 js 实现博客园的 “回到顶部” 功能——简易…

2018-07-13 03:07:03来源：博客园阅读 ()

当加载页面时，“回到顶部” 默认不显示，当拖滚动条后动态显示；当点击 “回到顶部” 时，匀减速回到顶部。

　　布局效果如下：

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>