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

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

那么,如何控制“回到顶部”按钮的显示或隐藏呢?其实我们只需要实现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标签)

 

本文作者:拓荒者IT

本文链接:https://www.cnblogs.com/youring2/archive/2012/11/21/2780315.html

版权声明:本作品采用知识共享署名-非商业性使用-禁止演绎 2.5 中国大陆许可协议进行许可。

 

📌做了个微信公众号【拓荒者IT】,分享各种技术干货,新内容首发到公众号,欢迎关注❤️

posted @   拓荒者IT  阅读(7707)  评论(0编辑  收藏  举报
历史上的今天:
2010-11-21 ASP.NET验证控件的使用
皮肤配置 参考地址:https://www.yuque.com/awescnb/user
点击右上角即可分享
微信分享提示
💬
评论
📌
收藏
💗
关注
👍
推荐
🚀
回顶
收起