博客园实现在阅读过程中“回到顶部”

我的博客 -- 管理 -- 设置 -- 页首HTML代码 -- 页脚HTML代码 -- 保存

效果：

1.页面定制CSS代码

代码展示：（这里可以根据自己喜欢的颜色，样式定义）

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

2.博客侧边栏公告

代码展示：

<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>