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


Posted in Javascript onJanuary 25, 2013

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

那么,如何控制“回到顶部”按钮的显示或隐藏呢?其实我们只需要实现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标签)
Javascript 相关文章推荐
javascript 冒号 使用说明
Jun 06 Javascript
细说浏览器特性检测(2)-通用事件检测
Nov 05 Javascript
Javascript变量的作用域和作用域链详解
Apr 02 Javascript
JS实现带圆弧背景渐变效果的导航菜单代码
Oct 13 Javascript
js获取鼠标点击的对象,点击另一个按钮删除该对象的实现代码
May 13 Javascript
基于JavaScript实现点击页面任何位置返回
Aug 31 Javascript
JS控制div跳转到指定的位置的几种解决方案总结
Nov 05 Javascript
12个非常有用的JavaScript技巧
May 17 Javascript
jQuery选择器特殊字符与属性空格问题
Aug 14 jQuery
利用jsonp与代理服务器方案解决跨域问题
Sep 14 Javascript
Vue瀑布流插件的使用示例
Sep 19 Javascript
vue+springboot实现登录验证码
May 27 Vue.js
jquery移除button的inline onclick事件(已测试及兼容浏览器)
Jan 25 #Javascript
javascript表单验证 - Parsley.js使用和配置
Jan 25 #Javascript
THREE.JS入门教程(6)创建自己的全景图实现步骤
Jan 25 #Javascript
使用JavaScript动态设置样式实现代码(2)
Jan 25 #Javascript
使用JavaScript动态设置样式实现代码及演示动画
Jan 25 #Javascript
jQuery获取Select选择的Text和Value(详细汇总)
Jan 25 #Javascript
javascript面向对象包装类Class封装类库剖析
Jan 24 #Javascript
You might like
jquery的相对父元素和相对文档定位示例代码
2013/08/02 Javascript
JsRender实用入门教程
2014/10/31 Javascript
node.js中的url.format方法使用说明
2014/12/10 Javascript
jQuery ajax方法传递中文时出现中文乱码的解决方法
2016/07/25 Javascript
Google 地图事件实例讲解
2016/08/06 Javascript
基于javascript实现按圆形排列DIV元素(三)
2016/12/02 Javascript
在使用JSON格式处理数据时应该注意的问题小结
2017/05/20 Javascript
node实现简单的反向代理服务器
2017/07/26 Javascript
利用javascript如何随机生成一定位数的密码
2017/09/22 Javascript
JS如何把字符串转换成json
2020/02/21 Javascript
Vue+ElementUI 中级联选择器Bug问题的解决
2020/07/31 Javascript
举例讲解Python中的算数运算符的用法
2015/05/13 Python
Python编写Windows Service服务程序
2018/01/04 Python
解决Python 中英文混输格式对齐的问题
2018/07/16 Python
浅谈Python批处理文件夹中的txt文件
2019/03/11 Python
Python常见数字运算操作实例小结
2019/03/22 Python
python字符串替换re.sub()方法解析
2019/09/18 Python
详解Python绘图Turtle库
2019/10/12 Python
python中的RSA加密与解密实例解析
2019/11/18 Python
python机器学习库xgboost的使用
2020/01/20 Python
详解CSS3中常用的样式【基本文本和字体样式】
2020/10/20 HTML / CSS
SQL数据库笔试题
2016/03/08 面试题
Java中的类包括什么内容?设计时要注意哪些方面
2012/05/23 面试题
Unix如何添加新的用户
2014/08/20 面试题
心得体会范文
2014/01/04 职场文书
优秀导游先进事迹材料
2014/01/25 职场文书
父亲节活动策划方案
2014/08/24 职场文书
研修心得体会
2014/09/04 职场文书
优秀党员申报材料
2014/12/18 职场文书
挂职个人工作总结
2015/03/05 职场文书
代理词怎么写
2015/05/25 职场文书
主持人大赛开场白
2015/05/29 职场文书
2016年情人节问候语
2015/11/11 职场文书
2016大学生诚信考试承诺书
2016/03/25 职场文书
vue引入Excel表格插件的方法
2021/04/28 Vue.js
排查MySQL生产环境索引没有效果
2022/04/11 MySQL