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 相关文章推荐
[转]JS宝典学习笔记
Feb 07 Javascript
Prototype1.6 JS 官方下载地址
Nov 30 Javascript
JavaScript 输入框内容格式验证代码
Feb 11 Javascript
使用js修改客户端注册表的方法
Aug 09 Javascript
通过正则表达式实现表单验证是否为中文
Feb 18 Javascript
Javascript+CSS实现影像卷帘效果思路及代码
Oct 20 Javascript
jQuery表单域选择器用法分析
Feb 10 Javascript
浅谈JavaScript中小数和大整数的精度丢失
May 31 Javascript
.net MVC+Bootstrap下使用localResizeIMG上传图片
Apr 21 Javascript
jQuery自定义元素右键点击事件(实现案例)
Apr 28 jQuery
微信小程序动画(Animation)的实现及执行步骤
Oct 28 Javascript
Vue props中Object和Array设置默认值操作
Jul 30 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/06/14 PHP
php 批量添加多行文本框textarea一行一个
2014/06/03 PHP
简单解析PHP程序的运行流程
2016/06/23 PHP
php基于curl主动推送最新内容给百度收录的方法
2016/10/14 PHP
php使用PDO执行SQL语句的方法分析
2017/02/16 PHP
laravel框架中视图的基本使用方法分析
2019/11/23 PHP
Javascript attachEvent传递参数的办法
2009/12/14 Javascript
Js中setTimeout()和setInterval() 何时被调用执行的用法
2013/04/12 Javascript
JavaScript闭包实例讲解
2014/04/22 Javascript
js打造数组转json函数
2015/01/14 Javascript
浅谈js对象属性 通过点(.) 和方括号([]) 的不同之处
2016/10/29 Javascript
Node.js数据库操作之查询MySQL数据库(二)
2017/03/04 Javascript
JavaScript实现图片拖曳效果
2017/09/08 Javascript
vue 基于element-ui 分页组件封装的实例代码
2018/12/10 Javascript
解决微信小程序云开发中获取数据库的内容为空的方法
2019/05/15 Javascript
解决layui数据表格Date日期格式的回显Object的问题
2019/09/19 Javascript
使用vue cli4.x搭建vue项目的过程详解
2020/05/08 Javascript
记录Django开发心得
2014/07/16 Python
Python多线程同步Lock、RLock、Semaphore、Event实例
2014/11/21 Python
python实现在每个独立进程中运行一个函数的方法
2015/04/23 Python
在Django的模型和公用函数中使用惰性翻译对象
2015/07/27 Python
对Python 2.7 pandas 中的read_excel详解
2018/05/04 Python
Python实现查询某个目录下修改时间最新的文件示例
2018/08/29 Python
python+numpy+matplotalib实现梯度下降法
2018/08/31 Python
python tkinter之顶层菜单、弹出菜单实例
2020/03/04 Python
Python中logger日志模块详解
2020/08/04 Python
5款实用的python 工具推荐
2020/10/13 Python
欧洲品牌瓷器餐具网上商店:Porzellantreff.de
2018/04/04 全球购物
函授毕业生自我鉴定
2013/11/06 职场文书
学习党章思想汇报
2014/01/07 职场文书
便利店的创业计划书
2014/01/15 职场文书
违反课堂纪律检讨书
2014/01/19 职场文书
致运动员赞词
2015/07/22 职场文书
安全生产标语口号
2015/12/26 职场文书
JS新手入门数组处理的实用方法汇总
2021/04/07 Javascript
Js类的构建与继承案例详解
2021/09/15 Javascript