例子---回到顶部

在说回到顶部的小例子之前,不得不提一下scrollTop的兼容性,因为如果不加以注意的话,很有可能代码写的没问题,效果却出不来,控制台也不报错,急死个人啊 ~
1、Chrome、Firefox、Opera浏览器不支持document.body.scrollTop,Safari浏览器支持。
2、Chrome、Firefox、Opera浏览器都支持document.documentElement.scrollTop,Safari不支持。
3、以上两条注意区分哦,我可是一个个浏览器验证的呢,哈哈~
4、兼容的写法:

var kind1 = document.body.scrollTop || document.documentElement.scrollTop;
var kind2 = document.body.scrollTop + document.documentElement.scrollTop;

OK,言归正传,我们开始“回到顶部”,哈哈O(∩_∩)O~


大致思路解说:
当页面可以滚动的时候会出现滚动条,而看过我前一篇博客的小伙伴们都知道,scrollTop是滚动上去的部分,所以这里判断当scrollTop>0的时候,我们事先定义好但是隐藏了的“回到顶部”的div就会出现,然后点击这个设置了循环定时器的div,就会在一定的时间内按一定的速度,回到顶部
实例代码(这里我只使用了document.documentELement.scrollTop哦):

CSS代码部分:

<style type="text/css">
        body{
            position: relative;
            height: 2000px;
        }
        #div{
            width: 100px;
            height: 100px;
            background-color: lightgray;
            line-height: 100px;
            text-align: center;
            position: fixed;
            bottom: 0px;
            right: 0px;
            display: none;
        }
</style>

<body>
    <div id="div">回到顶部</div>
</body>

JS代码部分:

<script type="text/javascript">
    var div = document.getElementById('div');
    var timer;
    document.body.onscroll=function(){
      if(document.documentElement.scrollTop>0){
            div.style.display = "block";
        }else{
            div.style.display = "none";
        }
    }

    div.onclick=function(){
        clearInterval(timer);
        timer = setInterval(function(){
            console.log(123);
            document.documentElement.scrollTop-=190;
            if(document.documentElement.scrollTop<=0){
                clearInterval(timer);
            }
        },20);
    }
</script>

想要看效果的小伙伴,可以自行编写查看哦,我就不上传了,Fighting!!!

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值