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 parseInt与Number函数的区别
Jan 21 Javascript
从零学JSON之JSON数据结构
May 19 Javascript
jquery.form.js实现将form提交转为ajax方式提交的方法
Apr 07 Javascript
jQuery实现的简单提示信息插件
Dec 08 Javascript
jQuery检测滚动条是否到达底部
Dec 15 Javascript
JS图片左右无缝隙滚动的实现(兼容IE,Firefox 遵循W3C标准)
Sep 23 Javascript
HTML5+Canvas调用手机拍照功能实现图片上传(上)
Apr 21 Javascript
Vue侧滑菜单组件——DrawerLayout
Dec 18 Javascript
浅析Vue.js中v-bind v-model的使用和区别
Dec 04 Javascript
基于JS实现一个随机生成验证码功能
May 29 Javascript
express框架下使用session的方法
Jul 31 Javascript
一篇文章带你浅入webpack的DLL优化打包
Feb 20 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
风味层面去分析咖啡油脂
2021/03/03 咖啡文化
用libTemplate实现静态网页的生成
2006/10/09 PHP
php中使用parse_url()对网址进行解析的实现代码(parse_url详解)
2012/01/03 PHP
微信公众平台网页授权获取用户基本信息中授权回调域名设置的变动
2014/10/21 PHP
php提交表单时保留多个空格及换行的文本样式的方法
2017/06/20 PHP
PHP使用redis消息队列发布微博的方法示例
2017/06/22 PHP
ThinkPHP3.1.x修改成功与失败跳转页面的方法
2017/09/29 PHP
PHP简单实现欧拉函数Euler功能示例
2017/11/06 PHP
PHP实现 APP端微信支付功能
2018/06/22 PHP
PHP实现SMTP邮件的发送实例
2018/09/27 PHP
php使用redis的有序集合zset实现延迟队列应用示例
2020/02/20 PHP
仅用[]()+!等符号就足以实现几乎任意Javascript代码
2010/03/01 Javascript
jquery中的查找parents与closest方法之间的区别
2013/12/02 Javascript
一个jquery实现的不错的多行文字图片滚动效果
2014/09/28 Javascript
BootstrapValidator不触发校验的实现代码
2016/09/28 Javascript
JS实战篇之收缩菜单表单布局
2016/12/10 Javascript
Angular下H5上传图片的方法(可多张上传)
2017/01/09 Javascript
jQuery动态追加页面数据以及事件委托详解
2017/05/06 jQuery
AngularJS使用ocLazyLoad实现js延迟加载
2017/07/05 Javascript
js最实用string(字符串)类型的使用及截取与拼接详解
2019/04/26 Javascript
vue使用原生swiper代码实例
2020/02/05 Javascript
[03:20]次级联赛厮杀超职业 现超级兵对拆世纪大战
2014/10/30 DOTA
Python基本数据类型详细介绍
2014/03/11 Python
给Python的Django框架下搭建的BLOG添加RSS功能的教程
2015/04/08 Python
Pandas DataFrame 取一行数据会得到Series的方法
2018/11/10 Python
Python提取频域特征知识点浅析
2019/03/04 Python
python实现高斯判别分析算法的例子
2019/12/09 Python
Python3爬虫里关于代理的设置总结
2020/07/30 Python
New Balance美国官网:运动鞋和健身服装
2017/04/11 全球购物
Daisy London官网:英国最大的首饰集团IBB旗下
2019/02/28 全球购物
C#可否对内存进行直接的操作
2015/02/26 面试题
财务会计毕业生个人求职信
2014/02/03 职场文书
摄影助理岗位职责
2014/02/07 职场文书
节约粮食标语
2014/06/18 职场文书
教师节倡议书
2014/08/30 职场文书
硕士论文致谢范文
2015/05/14 职场文书