教程集 www.jiaochengji.com
教程集 >  脚本编程  >  javascript  >  正文 隐藏与显示回到顶部按钮的js代码

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

发布时间:2014-12-30   编辑:jiaochengji.com
本文分享下,用js实现隐藏与显示回到顶部top按钮的一段代码,有需要的朋友作个参考。

要求在页面中实现如下的功能:
当滚动条滚动到页面的下方时,页面的右下角会显示出来一个“回到顶部”的按钮或连接,点击该按钮后页面会跳转到顶部,或某一个适合查看内容的位置。

这里有一个问题就是:
如何控制“回到顶部”按钮的显示或隐藏?

具体的办法是:
借助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.jbxue.com
</script>

说明:
scrollto 为页面上“回到顶部”的容器(div标签)。

您可能感兴趣的文章:
JS一键返回顶部功能的代码
返回顶端的js代码(纯文字版)
返回页面顶部及去页面底部的js代码

您可能感兴趣的文章:
隐藏与显示回到顶部按钮的js代码
返回顶端的js代码(纯文字版)
jquery hide与show方法隐藏与显示标签
网页中返回顶部代码(多种方法)另附注释说明
js+JQuery返回顶部功能如何实现
仿新浪微博返回顶部的jquery实现代码
jBox 2.3基于jquery的最新多功能对话框插件 常见使用问题解答
jquery隐藏标签、显示标签的例子
js div 顶部全屏广告代码
js 居中漂浮广告代码

关键词: 返回顶部  回到顶部   
[关闭]
~ ~