手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >js隐藏与显示回到顶部按钮及window.onscroll事件应用
js隐藏与显示回到顶部按钮及window.onscroll事件应用
摘要:现在大多数网站都会添加这种功能:当滚动条滚动到页面的下方时,页面的右下角会显示出来一个“回到顶部”的按钮或连接,点击该按钮后页面会跳转到顶部...

现在大多数网站都会添加这种功能:当滚动条滚动到页面的下方时,页面的右下角会显示出来一个“回到顶部”的按钮或连接,点击该按钮后页面会跳转到顶部,或某一个适合查看内容的位置。

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

【js隐藏与显示回到顶部按钮及window.onscroll事件应用】相关文章:

jQuery实现自动滚动到页面顶端的方法

JSON简介以及用法汇总

JavaScript通过Date-Mask将日期转换成字符串的方法

Javascript类型转换的规则实例解析

关于JavaScript作用域你想知道的一切

实现高性能JavaScript之执行与加载

JavaScript function函数种类详解

javascript动态创建链接的方法

js实现文本框选中的方法

javascript中createElement的两种创建方式

精品推荐
分类导航