欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-10-23 10:35:28
当加载页面时,“回到顶部” 默认不显示,当拖滚动条后动态显示;当点击 “回到顶部” 时,匀减速回到顶部。 布局效果如下: 1、首先在设置中的“页面定制CSS代码”中,添加如下css代码(也可以修改成自己喜欢的样式噢~): 2、然后在“博客侧边栏公告(支持HTML代码)(支持JS代码)”中,添加如下j ......

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

  布局效果如下:

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