js隐藏与显示回到顶部按钮

  1. 云栖社区>
  2. 博客>
  3. 正文

js隐藏与显示回到顶部按钮

老朱教授 2017-11-26 14:20:00 浏览504
展开阅读全文

现在大多数网站都会添加这种功能:当滚动条滚动到页面的下方时,页面的右下角会显示出来一个“回到顶部”的按钮或连接,点击该按钮后页面会跳转到顶部,或某一个适合查看内容的位置。

那么,如何控制“回到顶部”按钮的显示或隐藏呢?其实我们只需要实现window.onscroll 事件即可,代码如下:

复制代码
window.onscroll = function () {
    if (document.documentElement.scrollTop + document.body.scrollTop > 100) {
        document.getElementById("scrollto").style.display = "block";
    }
    else {
        document.getElementById("scrollto").style.display = "none";
    }
}
复制代码

scrollto 为页面上“回到顶部”的容器(div标签)

 




本文转自齐师傅博客园博客,原文链接:http://www.cnblogs.com/youring2/archive/2012/11/21/2780315.html,如需转载请自行联系原作者

网友评论

登录后评论
0/500
评论
老朱教授
+ 关注