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

ttx9n · 发表于 2013-1-25 15:12:35

现在大多数网站都会添加这种功能：当滚动条滚动到页面的下方时，页面的右下角会显示出来一个“回到顶部”的按钮或连接;那么，如何控制“回到顶部”按钮的显示或隐藏呢;本文介绍详细实现方法，感兴趣的你可不要走开哦现在大多数网站都会添加这种功能：当滚动条滚动到页面的下方时，页面的右下角会显示出来一个“回到顶部”的按钮或连接，点击该按钮后页面会跳转到顶部，或某一个适合查看内容的位置。

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

errol123 · 发表于 2022-12-22 08:12:47

好东西可以可以可以可以

qq303604905 · 发表于 2023-2-8 14:50:58

66666666666666666666

a75620618 · 发表于 2023-9-4 13:35:07

啦啦啦啦啦啦啦啦！

q42obh · 发表于 2024-4-5 12:16:26

老衲笑纳了

i3x3r3 · 发表于 2024-4-6 08:38:01

啦啦啦啦啦啦哈哈哈

j__j33p · 发表于 2024-4-8 12:18:35

怕怕怕怕怕怕怕怕怕怕怕怕怕怕

fwn2rd · 发表于 2024-6-25 18:14:42

8888888888888888

u6h2m4 · 发表于 2024-9-9 09:27:51

好东西可以可以可以可以

7jbiiz · 发表于 2024-9-17 12:24:26

儿童服务绯闻绯闻绯闻

账号		自动登录	找回密码
密码			立即注册

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

相关帖子