源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

js隐藏与显示回到顶部按钮及window.onscroll事件应用

  • 时间:2020-09-13 19:47 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:js隐藏与显示回到顶部按钮及window.onscroll事件应用
现在大多数网站都会添加这种功能:当滚动条滚动到页面的下方时,页面的右下角会显示出来一个“回到顶部”的按钮或连接,点击该按钮后页面会跳转到顶部,或某一个适合查看内容的位置。 那么,如何控制“回到顶部”按钮的显示或隐藏呢?其实我们只需要实现window.onscroll 事件即可,代码如下:
[u]复制代码[/u] 代码如下:
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标签)
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部