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 相关文章推荐
关于COOKIE个数与大小的问题
Jan 17 Javascript
Javascript中Event属性搜集整理
Sep 17 Javascript
JavaScript截取、切割字符串的技巧
Jan 07 Javascript
jQuery根据name属性进行查找的用法分析
Jun 23 Javascript
纯JS焦点图特效实例(可一个页面多用)
Dec 07 Javascript
基于jQuery实现选项卡效果
Jan 04 Javascript
纯JS实现轮播图
Feb 22 Javascript
原生JS+Canvas实现五子棋游戏实例
Jun 19 Javascript
利用npm 安装删除模块的方法
May 15 Javascript
vue.js自定义组件directives的实例代码
Nov 09 Javascript
详解基于原生JS验证表单组件xy-form
Aug 20 Javascript
layui关闭弹窗后刷新主页面和当前更改项的例子
Sep 06 Javascript
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
PHP高级对象构建 工厂模式的使用
2012/02/05 PHP
php检查是否是ajax请求的方法
2015/04/16 PHP
日常整理PHP中简单的图形处理(经典)
2015/10/26 PHP
php中让人头疼的浮点数运算分析
2016/10/10 PHP
Javascript模块模式分析
2008/05/16 Javascript
JQuery 学习笔记 选择器之二
2009/07/23 Javascript
ExtJS4给Combobox设置列表中的默认值示例
2014/05/02 Javascript
jquery修改网页背景颜色通过css方法实现
2014/06/06 Javascript
jQuery实现列表自动滚动循环滚动展示新闻
2014/08/22 Javascript
文本框倒叙输入让输入框的焦点始终在最开始的位置
2014/09/01 Javascript
jquery实现简单的二级导航下拉菜单效果
2015/09/07 Javascript
JavaScript 对象深入学习总结(经典)
2015/09/29 Javascript
JS简单限制textarea内输入字符数量的方法
2015/10/14 Javascript
原生态js,鼠标按下后,经过了那些单元格的简单实例
2016/08/11 Javascript
Select2.js下拉框使用小结
2016/10/24 Javascript
Angular-Ui-Router+ocLazyLoad动态加载脚本示例
2017/03/02 Javascript
纯jQuery实现前端分页功能
2017/03/23 jQuery
Node.js设置CORS跨域请求中多域名白名单的方法
2017/03/28 Javascript
浅谈vue-router 路由传参的方法
2017/12/27 Javascript
基于Nodejs的Tcp封包和解包的理解
2018/09/19 NodeJs
微信小程序实现购物车功能
2020/11/18 Javascript
[07:08]2014DOTA2西雅图国际邀请赛 小组赛7月11日TOPPLAY
2014/07/11 DOTA
[45:44]完美世界DOTA2联赛PWL S2 FTD vs PXG 第一场 11.27
2020/12/01 DOTA
Python中List.index()方法的使用教程
2015/05/20 Python
浅谈Python用QQ邮箱发送邮件时授权码的问题
2018/01/29 Python
SIXPAD智能健身仪英国官网:革命性的训练装备品牌
2018/09/27 全球购物
荷兰最大的鞋子、服装和运动折扣店:Bristol
2021/01/07 全球购物
我的applet原先好好的, 一放到web server就会有问题,为什么?
2016/05/10 面试题
网络工程系信息安全技术专业大学生求职信
2013/10/22 职场文书
幼儿如何来做好自我评价
2013/11/05 职场文书
学雷锋活动总结范文
2014/04/25 职场文书
物理学专业求职信
2014/07/04 职场文书
辩论赛新闻稿
2015/07/17 职场文书
2019大学生社会实践报告汇总
2019/08/16 职场文书
PyTorch的Debug指南
2021/05/07 Python
Redis高并发防止秒杀超卖实战源码解决方案
2021/11/01 Redis