原生JavaScript返回顶部

作者: Tokinx
时间: 2016-06-21
分类: 代码

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

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

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就可以了。

标签: js, javascript, 原生js

已有 114 条评论

c

2016-06-21 22:07

这主题不用jQuery太爽了！

回复
1. Tokin
  
  2016-06-23 10:56
  
  zepto跟jquery一个性质
  
  回复
Ace

2016-06-22 07:48

这主题不用jQuery太爽了！

回复
windboy

2016-06-23 20:04

哥你这主题怎么设置侧边栏啊

回复
洃少

2016-06-27 10:08

祝工作顺利

回复
loy

2016-06-27 16:38

换主题了？之前那个新主题不发布了吗？

回复
垃圾站

2016-06-27 23:26

学习了，mark一下，你的博客不错！

回复
1. Tokin
  
  2016-06-28 16:20
  
  好久没见你呀
  
  回复
  1. 垃圾站
    
    2016-06-28 16:24
    
    有快2年没怎么弄博客了……
    
    回复
Meekdai

2016-06-28 00:07

访问速度超级快~~~

回复
荐洋机部落

2016-06-29 16:21

荐洋机部落主要撰写测评国内外主机、VPS，成立一来一直秉承免费、共享、分享的经受，致力于打造国内专业的国外主机推荐测评网站。每日更新原创文章，希望友情链接。

回复
Lynn

2016-06-30 00:38

主题大爱啊，坐等博主完善，随小民已入typecho党，但架不住主题好。
ps：背景做点灰色可好，白色眼睛累

回复
1. 洃少
  
  2016-06-30 15:55
  
  这是wp主题
  
  回复
  1. Lynn
    
    2016-06-30 18:49
    
    不要在意这些，主题喜欢没办法，入WP党也是极好的
    
    回复
2. Tokin
  
  2016-07-01 08:35
  
  眼睛累，9成是因为你显示器的问题。换个显示器吧，伤眼。。。。估计是对比度或者亮度太高了
  
  回复
内涵妹

2016-06-30 17:19

路过此地，喝杯茶再走，O(∩_∩)O~ 有空来找内涵妹 neihanmei.cn 聊聊呗

回复
小C博客

2016-06-30 21:42

好东西！

回复
c

2016-07-01 22:42

秋空博客关闭，烦请更换友链：
8moe（http:/（过审）/8moe.com）
造成麻烦深表歉意&致谢！

回复
1. c
  
  2016-07-04 00:57
  
  感谢o(^▽^)o
  能不能帮我把名字改成“8moe”？
  顺便，新主题没谁了……
  
  回复
  1. Tokin
    
    2016-07-04 15:26
    
    改好了。话说你现在留言的地址还是qiukong
    
    回复
    
    c
    
    2016-07-05 09:04
    
    居然有点习惯了……(´Д` )
    
    回复
  2. Tokin
    
    2016-07-05 13:23
    
    能不能不要用无效的邮箱。。。我会收到退信。。。
    
    回复
    
    c
    
    2016-07-07 03:12
    
    这邮箱真是我的……估计主机不相信
    
    回复
    
    Tokin
    
    2016-07-07 11:48
    
    你为什么不留8moe的网址
    
    回复
    
    c
    
    2016-07-08 13:25
    
    那网站不是我个人在做，以后打算搞成个综合动漫社区。
    慢慢我也该淡出建站圈，退休回家画萝莉了23333
    
    回复
    
    c
    
    2016-07-08 13:27
    
    其实关站更大原因是下定决心脱离技术行业。
    前一段时间查出了肾结石、肠炎、胃炎，大多和现在的熬夜有关。
    
    回复
    
    Tokin
    
    2016-07-11 10:17
    
    不会吧，那我问题多的都不敢去查，有一个脱离圈子的，唉- -
    
    回复
    
    Tokin
    
    2016-07-07 17:23
    
    现在好了
    
    回复
神父

2016-07-02 18:24

你又换皮！要求跟上！

回复
碎碎念

2016-07-02 20:35

加个缓冲会更好

回复
大雄

2016-07-03 20:02

除了首页的大图打开了三分钟之外，毫无槽点。

回复
1. Tokin
  
  2016-07-04 00:17
  
  哈，图省事儿没压缩也没传到主机里，现在好点了，压缩了一下，也放到主机上了。
  
  回复
吕

2016-07-03 22:18

其他平台没有更新程序，大神能否把现在的代码发我不慎感激 2929691562@qq.com

回复
小白

2016-07-03 23:25

等了两天没等到更新主题啊。。。

回复
1. Tokin
  
  2016-07-03 23:55
  
  可以了，现在就去后台去更新吧。
  
  回复
  1. 吕
    
    2016-07-06 11:38
    
    后台现在能更新吗？？？
    
    回复
    
    Tokin
    
    2016-07-06 11:44
    
    什么？iDevise主题吗？可以更新。
    
    回复
    
    吕
    
    2016-07-06 11:46
    
    iDevise主题更新后还是单栏的那种啊，文章列表没有图片，还是发布主题截图的样式哦
    
    回复
    
    Tokin
    
    2016-07-06 12:58
    
    方便留网址么，不方便的话可以直接回复本邮件
    
    回复
    
    Tokin
    
    2016-07-06 13:08
    
    你好，iDevise跟本站现用主题不是同一款。且iDevise的维护已经停止了，在保证能用的前提下，主题不会再新增任何功能和改变。
    
    如果喜欢本站主题，可以持续关注一段时间，本站所有主题都会不定期以免费或付费的方式放出，届时欢迎你前来支持。
    
    回复
唯美图片

2016-07-04 09:05

新主题有发布么？还在用着你之前发布的那款单栏主题~:)

回复
1. Tokin
  
  2016-07-05 13:25
  
  可以给我一个晚上的时间吗，今天下班后我就把之前的主题完善好，你可以加我QQ，做好后第一时间发给你。
  
  邮箱联系我获取QQ号码。
  
  回复
  1. 唯美图片
    
    2016-07-05 16:15
    
    邮件已发。
    
    回复
小白

2016-07-04 09:22

请问评论头像是怎么显示的？我的忘了是不是被自己设置了还是怎么回事。。。

回复
1. Tokin
  
  2016-07-04 14:03
  
  去Gravatar设置
  
  回复
  1. 小白
    
    2016-07-05 11:48
    
    你好，请问如何去掉博客中的个人说明呢？就是文章末尾跟评论之间的两条白线中内容：http://www.virgoer.com/archives/1169 麻烦看一下，谢谢。还有，请问你的图片是怎么做到这样的排版的？https://www.idevs.cn/2016/3669.html，我也会贴图，但是贴出来都是原图大小，排版不好看，求指点。
    
    回复
    
    Tokin
    
    2016-07-06 10:59
    
    如果会html，可以在后他修改主题，或者省事点直接用css隐藏掉。
    
    贴图的问题，还是前提是会html，手动插入图片，用div包裹img标签，div的class分别是class="img img_1"、class="img img_2"、class="img img_3"
    
    比如：
    
    <div class="img img_2">
    <img src="https://www.idevs.cn/wp-content/uploads/DSC_3178.jpg">
    <img src="https://www.idevs.cn/wp-content/uploads/DSC_3171.jpg">
    </div>
    
    回复
夏日博客

2016-07-04 17:40

返回顶部直接做个井号链接不就可以了麽。

回复
1. Tokin
  
  2016-07-04 17:59
  
  还要控制它显示和隐藏呢
  
  回复
无语

2016-07-05 21:53

炒鸡喜欢这个网站现用的主题，不准备发布吗。佷想要嘞。

回复
1. Tokin
  
  2016-07-06 13:53
  
  会发布的，还没收尾
  
  回复
Yook

2016-07-06 10:19

看到页脚版权上是有着Pro字样有种不好的预感：这特么是天空团的收费主题啊

回复
1. Tokin
  
  2016-07-06 10:51
  
  喜欢嘛，我为你这个预言家打5折。
  
  回复
小叶

2016-07-06 14:25

在拿博主的idevise主题改成Desnote-pro主题哦？手动斜眼.jpg 博主不介意吧。溜了版权在底部

回复
1. Tokin
  
  2016-07-06 14:52
  
  仅供自用就不介意，但是还是有很多话要说：
  
  1、别人仿我主题都是仿之前就联系好，你都改好了再告诉我，有意思么
  
  2、版权去了掉链接，你以为发免费主题就是为了那几行字么。
  
  3、别人都是拿我主题努力改成自己的Style，你为什么总是盯着我的主题不放。
  
  算了，努力告诉自己要心宽，想咋整咋整吧，自用就行。
  
  回复
  1. 小叶
    
    2016-07-06 14:55
    
    呃…… 这样的话，那我换掉主题吧。
    
    回复
    
    Tokin
    
    2016-07-06 14:58
    
    我的底线是仅供自用，不要外泄，谢谢配合
    
    回复
  2. 小叶
    
    2016-07-06 15:01
    
    还有我几句话想说。
    1.我为什么现在联系，因为我是凌晨才改的。
    2.版权问题是因为我刚上传到网站上测试。而且还没改完还在修改当中。
    3.虽然说也是仿你现在的主题。但是我是选择自己喜欢的模块进行仿。
    接着讲3.我为什么仿你现在的主题。不就是因为喜欢你的风格才会选择仿吗？真是很奇怪哎。
    
    回复
    
    小叶
    
    2016-07-06 15:12
    
    已经添加了版权超链接
    
    回复
    
    Tokin
    
    2016-07-06 15:13
    
    可是DesNote-Pro我是要付费放出的主题，角色互换一下，你现在什么感受呢？
    
    我的话可能过激了一些，但是心里还是不舒服的。
    
    非常感谢你对我博客的关注，也希望你能理解。
    
    其实，如果你提前联系就可以避免很多问题了，在此之前也有不少人要仿或移植我其它主题，我很少有不答应的情况，甚至会提供技术支持，只是这次不一样。
    
    回复
    
    小叶
    
    2016-07-06 15:16
    
    我知道你的感受。仿主题，被仿的那方的确会很不爽。我懂的。我会慢慢把主题改成别的样式。
    
    回复
    
    小叶
    
    2016-07-06 15:26
    
    对了，能交换个友链吗？....
    
    回复
    
    Tokin
    
    2016-07-06 15:44
    
    你博客怎么了
    
    回复
    
    小叶
    
    2016-07-06 15:46
    
    我正在手动升级4.5 后台自动升级不了。这个主题我是基于4.5改的。导致我线上的4.2没法正常用，会有bug
    
    回复
    
    小叶
    
    2016-07-06 15:57
    
    已经升级成功了，可以正常访问了。
    
    回复
    
    小叶
    
    2016-07-06 16:18
    
    Tokin，换友链吗？首页的
    
    回复
精选故事网

2016-07-06 16:25

你的博客是怎么把代码放上来的啊？

回复
1. Tokin
  
  2016-07-06 20:46
  
  代码要用code标签包裹起来，你可能需要学习一下如何使用富文本编辑器
  
  回复
  1. 精选故事网
    
    2016-07-07 09:01
    
    谢谢分享、、、、
    
    回复
Ace

2016-07-07 12:38

我已经跟不上你的步伐了...

回复
呆妞Stone

2016-07-07 14:11

新主题不错呦

回复
1. 呆妞Stone
  
  2016-07-07 14:29
  
  会发布嘛，啥时候能用尼
  
  回复
Rich

2016-07-08 15:11

新主题的动画特效真多，好评

回复
1. Tokin
  
  2016-07-11 10:12
  
  这动画还多呀，我都很克制了，有些地方不加动画会很怪异
  
  回复
  1. Rich
    
    2016-07-11 16:59
    
    用的动画比较合适，过渡挺自然的，我见有的站动画真的过多了使人产生厌倦感（也与用的地方不合适有关）。不过返回顶部怎么没动画了？
    
    回复
    
    Tokin
    
    2016-07-11 22:46
    
    我的域名“被”备案了，有什么好的办法解决么
    
    回复
    
    Rich
    
    2016-07-11 22:55
    
    IO域名，一个字服！我查了下貌似需要注销你域名现在的备案，比较麻烦的赶脚：
    1.去到http://www.miibeian.gov.cn/，不用登陆，直接在公共查询处查询该域名已备案信息，把详细信息抄录下来;
    　　2.在http://www.miibeian.gov.cn/ 首页公告栏里，查询该域名备案号所属管理局电话;
    　　3.致电该管理局，阐述事由;
    　　4.准备材料：域名注册证书(向你的域名注册商索取)、身份证复印件、域名备案注销申请(自己写明事由、该域名已备案信息、姓名、联系方式);
    　　5.将准备好之材料传真至该域名管理局;
    　　6.等候处理结果，一般24小时内即可办理完毕。
    
    不如干脆不要备案算了。可以考虑下换日本VPS。。。我现在在用5美元一月的Vultr，用OneinStack LNMP建站。。如果愿意可以戳下我的AFF： http://www.vultr.com/?ref=6910497
    
    回复
    
    Tokin
    
    2016-07-12 08:10
    
    5刀/月，我会觉得贵诶。。。而且放着阿里云不用，我觉得很浪费
    
    回复
    
    Rich
    
    2016-07-12 09:31
    
    是啊，略贵，主要是现在用优惠码可以PayPal充5美元送20美元。。相当于免费用了
    
    回复
    
    Tokin
    
    2016-07-12 10:30
    
    哭瞎，满打满算用5-7个月？我记得新注册有10刀？
    
    回复
Jack

2016-07-10 09:39

看看

回复
思源

2016-07-10 10:51

不错

回复
chasonma

2016-07-10 17:29

一个星期没来，你又变了。（滑稽）

回复
1. Tokin
  
  2016-07-10 20:33
  
  我不是二狗- -
  
  回复
shinelin

2016-07-12 14:56

看了博主好多篇博文，真是有毅力！！
自己马上要毕业了，感觉自己用不起阿里云主机了。
于是乎，开始转静态博客hexo.......

回复
1. Tokin
  
  2016-07-14 00:30
  
  可以考虑一下别的主机啊，hexo静态的玩的感觉不舒服，尤其是没有原生的评论系统
  
  回复
  1. Magic
    
    2017-06-08 13:47
    
    阿里云一年6月虚拟主机等你
    
    回复
    
    Tokin
    
    2017-06-08 13:54
    
    虚拟主机不符合我爵士身份 :oops:
    
    回复
    
    Magic
    
    2017-06-08 13:58
    
    :smile: 我是国王
    
    回复
泽辉

2016-07-12 19:28

咦，换域名啦，开始以为进错了，https://biji.io挺好记的

回复
1. Tokin
  
  2016-07-14 00:29
  
  哈哈，就是看着眼晕
  
  回复
themebetter

2016-07-13 09:22

模版很简洁，不错。

回复
Ethan

2016-07-13 17:37

好棒，居然换了io的域名，我一直也想要，不知道买啥，，，_

回复
1. Tokin
  
  2016-07-14 00:29
  
  好像io域名是个低调的后缀，以为很冷门，注册的时候发现跟com一样，想到的都没了
  
  回复
尹先生

2016-07-13 20:15

恭喜博主获得一级品域名QAQ

回复
1. Tokin
  
  2016-07-14 00:28
  
  可是是已备案的，心伤，还得想办法注销备案然后再自己备案
  
  回复
Lynn

2016-07-16 21:25

之前那个白色抬头的呢？改成现在这个样子了吗？好喜欢之前的，还在等着发布呢

回复
1. Tokin
  
  2016-07-18 08:19
  
  白色的抬头？哪个部分？
  
  回复
澳门银座

2016-07-18 14:00

博主的文章写得非常棒很喜欢

回复
澳门银座

2016-07-18 14:07

顶顶顶顶顶顶顶顶顶顶非常不错

回复
澳门银座

2016-07-18 14:12

排版很好看，简单大方，个人很喜欢

回复
昌浩

2016-08-23 18:56

为什么我这里是不管用的，返回顶部

回复
阿歪

2016-09-11 00:17

为了省事我用了 jQ 写，其实也不错，就是要加载一个 jQ 库有点郁闷。

回复
1. Tokin
  
  2016-09-12 14:39
  
  jq很方便，我现在也用jq写- -
  
  回复
Weidan

2016-11-23 09:12

JS写起来还是蛮好玩的不过公司都是用JQ :neutral:

回复
1. Tokin
  
  2016-11-24 14:09
  
  还是jq写起来顺手啊
  
  回复
Lonely

2016-11-26 16:25

:idea: 楼主的代码在WordPress是如何插入的呀？

回复
行星

2017-01-16 14:24

无论是JQ还是JS，我觉得都挺要命的。。。。完全看不懂 :smile:

回复
Magic

2017-06-08 13:46

博主写的这个是直接返回没有缓动 :twisted:

回复
1. Tokin
  
  2017-06-08 13:55
  
  不需要缓动，影响效率
  
  回复
  1. Magic
    
    2017-06-08 13:58
    
    :arrow: 哈哈
    
    回复
mashiro

2017-08-25 15:35

请问博主现在用的这个是什么字体呀？ :lol:

回复
1. Tokin
  
  2017-08-26 21:57
  
  英文字体是EXO-2
  
  回复
  1. mashiro
    
    2017-08-26 22:13
    
    收到，谢谢~ :mrgreen:
    
    回复