例子---回到顶部

来源：互联网发布：淘宝联盟在哪里进入编辑：程序博客网时间：2024/05/21 16:59

在说回到顶部的小例子之前，不得不提一下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