原生JavaScript返回顶部

简单的返回顶部按钮

来源于:

https://biji.io/2016/3956.html

这种简单的小功能思路很清晰,就是检测滚动条是不是在顶部,不是的话就显示返回顶部按钮,是的话就把它隐藏。

滚动条监测在新版的主流浏览器中是这样实现的:

document.body.scrollTop

如果想要兼容IE,那么可以加入下面这句完成:

document.documentElement.scrollTop

上面就是最主要的代码了,但是想要实现实时的监测滚动条的位置,我们还需要一个window.onscroll才能完成,这样不断下拉会不断刷新滚动条的位置。

说道这里,你大概已经可以试着写出返回顶部这个功能了。

贴出我的代码吧:

HETM

<a class="back2top" style="display:none;"></a>

CSS

.back2top {z-index:99;background:#000;width:36px;height:36px;display:block;position:fixed;right:20px;bottom:20px;cursor:pointer;border-radius:2px;opacity:.6;}
.back2top:before {content:"";position:absolute;right:8px;top:10px;border-left:10px solid transparent;border-right:10px solid transparent;border-bottom:15px solid #fff;}

JavaScript

window.onscroll=function(){var goTop = document.getElementsByClassName("back2top");if(goTop.length>0){
        goTop[0].style.display = document.documentElement.scrollTop >= 200 || document.body.scrollTop >= 200 ? 'block':'none';
        goTop[0].onclick=function(){
            document.body.scrollTop=0;
            document.documentElement.scrollTop=0;}

getElementsByClassName可能不兼容IE8,如果想向下兼容,可以尝试用getElementById就可以了。

css

Font Awesome-一套绝佳的图标字体库和CSS框架

2019-1-20 4:54:17

css

2018期末的网页

2019-2-1 18:28:50

⚠️
Npcink上的部份代码及教程来源于互联网,仅供网友学习交流,若您喜欢本文可附上原文链接随意转载。
无意侵害您的权益,请发送邮件至 link@baimu.org 或点击右侧 私信:Muze 反馈,我们将尽快处理。
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索