• 七角七分博客欢迎大家光临

一个简单的返回头部实例

随笔 七七 2年前 (2022-02-19) 0个评论

从www.ylbjxx.cn上取的一个简洁返回头部实例,通过CSS和一段JS控制,简单实用,推荐给大家收藏使用。

CSS段大致内容为:

<style type="text/css">
#gotop:hover{background-position:0px -51px}#gotop {width: 38px;height: 39px;position: fixed;bottom: 20px;right: 40px;top: auto;display: block;cursor: pointer;z-index: 999;background: #00a4ef url(/skin/21.png) no-repeat;border: 1px solid #dfdfdf;}
</style>

 

 

DIV调用内容:

<div id="gotop" style="display: none;"></div>
 

JS段内容:

<script type="text/javascript">
    backTop=function (btnId){
        var btn=document.getElementById(btnId);
        var d=document.documentElement;
        var b=document.body;
        window.onscroll=set;
        btn.onclick=function (){
            btn.style.display="none";
            window.onscroll=null;
            this.timer=setInterval(function(){
                d.scrollTop-=Math.ceil((d.scrollTop+b.scrollTop)*0.1);
                b.scrollTop-=Math.ceil((d.scrollTop+b.scrollTop)*0.1);
                if((d.scrollTop+b.scrollTop)==0) clearInterval(btn.timer,window.onscroll=set);
            },10);
        };
        function set(){btn.style.display=(d.scrollTop+b.scrollTop>100)?'block':"none"}
    };
    backTop('gotop');
</script>

想省事的可以直接调用。

喜欢 (1)
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址