要求在页面中实现如下的功能:
当滚动条滚动到页面的下方时,页面的右下角会显示出来一个“回到顶部”的按钮或连接,点击该按钮后页面会跳转到顶部,或某一个适合查看内容的位置。
这里有一个问题就是:
如何控制“回到顶部”按钮的显示或隐藏?
具体的办法是:
借助window.onscroll事件即可实现,代码如下:
复制代码 代码示例:
<script>
//回到顶部 隐藏与显示
window.onscroll = function () {
if (document.documentElement.scrollTop + document.body.scrollTop > 100) {
document.getElementById("scrollto").style.display = "block";
}
else {
document.getElementById("scrollto").style.display = "none";
}
} //edit by www.jb200.com
</script>
说明:
scrollto 为页面上“回到顶部”的容器(div标签)。
您可能感兴趣的文章:
JS一键返回顶部功能的代码
返回顶端的js代码(纯文字版)
返回页面顶部及去页面底部的js代码