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标签)




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

相关文章
|
2月前
|
移动开发 JavaScript 前端开发
分享88个表单按钮JS特效,总有一款适合您
分享88个表单按钮JS特效,总有一款适合您
30 1
|
2月前
|
存储 移动开发 JSON
分享86个表单按钮JS特效,总有一款适合您
分享86个表单按钮JS特效,总有一款适合您
31 1
|
3月前
|
JavaScript 前端开发 算法
JavaScript中的排他算法实现按钮单选
JavaScript中的排他算法实现按钮单选
18 0
|
3月前
|
JavaScript 前端开发 小程序
js vue实现回到顶部动画效果
js vue实现回到顶部动画效果
|
2月前
|
移动开发 JSON JavaScript
分享76个表单按钮JS特效,总有一款适合您
分享76个表单按钮JS特效,总有一款适合您
23 5
|
3月前
|
前端开发 JavaScript
分享几个精美的网页按钮样式,纯CSS实现,无JS(拿来即用)
分享几个精美的网页按钮样式,纯CSS实现,无JS(拿来即用)
33 0
|
3月前
|
JavaScript
JS购物车或表格中减号按钮无法响应的问题
JS购物车或表格中减号按钮无法响应的问题
|
4月前
|
JavaScript 前端开发 容器
js使用表格生成一个日历,点击按钮上查看上个月,点击按钮下,查看下个月,月份,年份
js使用表格生成一个日历,点击按钮上查看上个月,点击按钮下,查看下个月,月份,年份
59 0
|
4月前
|
JavaScript
js回到顶部
js回到顶部
|
2月前
|
JavaScript
Node.js【GET/POST请求、http模块、路由、创建客户端、作为中间层、文件系统模块】(二)-全面详解(学习总结---从入门到深化)
Node.js【GET/POST请求、http模块、路由、创建客户端、作为中间层、文件系统模块】(二)-全面详解(学习总结---从入门到深化)
27 0