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 相关文章推荐
自己开发Dojo的建议框架
Sep 24 Javascript
Javascript学习指南
Dec 01 Javascript
2014 HTML5/CSS3热门动画特效TOP10
Dec 07 Javascript
浅谈JavaScript中的对象及Promise对象的实现
Nov 15 Javascript
微信小程序购物商城系统开发系列-目录结构介绍
Nov 21 Javascript
jQuery Plupload上传插件的使用
Apr 19 jQuery
使用vue实现grid-layout功能实例代码
Jan 05 Javascript
javascript实现获取一个日期段内每天不同的价格(计算入住总价格)
Feb 05 Javascript
在 vue-cli v3.0 中使用 SCSS/SASS的方法
Jun 14 Javascript
Node.js中package.json中库的版本号(~和^)
Apr 02 Javascript
js简单遍历获取对象中的属性值的方法示例
Jun 19 Javascript
vue 动态添加的路由页面刷新时失效的原因及解决方案
Feb 26 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
PHP setcookie() cannot modify header information 的解决方法
2009/01/09 PHP
php表单提交与$_POST实例分析
2015/01/26 PHP
javascript document.execCommand() 常用解析
2009/12/14 Javascript
javascript 事件查询综合 推荐收藏
2010/03/10 Javascript
js本身的局限性 别让javascript做太多事
2010/03/23 Javascript
jQuery示例收集
2010/11/05 Javascript
javascript复制对象使用说明
2011/06/28 Javascript
用js写了一个类似php的print_r输出换行功能
2013/02/18 Javascript
JS继承--原型链继承和类式继承
2013/04/08 Javascript
JS命名空间的另一种实现
2013/08/09 Javascript
JavaScript对Cookie进行读写操作实例
2015/07/25 Javascript
javascript+HTML5的Canvas实现Lab单车动画效果
2015/08/07 Javascript
JQuery点击事件回到页面顶部效果的实现代码
2016/05/24 Javascript
jQuery模拟完美实现经典FLASH导航动画效果【附demo源码下载】
2016/11/09 Javascript
原生js实现日期计算器功能
2017/02/17 Javascript
vue2.x 父组件监听子组件事件并传回信息的方法
2017/07/17 Javascript
详解为Bootstrap Modal添加拖拽的方法
2018/01/05 Javascript
基于Angular 8和Bootstrap 4实现动态主题切换的示例代码
2020/02/11 Javascript
python函数形参用法实例分析
2015/08/04 Python
深入解读Python解析XML的几种方式
2016/02/16 Python
使用Python编写一个最基础的代码解释器的要点解析
2016/07/12 Python
Python实现两款计算器功能示例
2017/12/19 Python
Windows下将Python文件打包成.EXE可执行文件的方法
2018/08/03 Python
对python3新增的byte类型详解
2018/12/04 Python
解决Python 使用h5py加载文件,看不到keys()的问题
2019/02/08 Python
Django对接支付宝实现支付宝充值金币功能示例
2019/12/17 Python
详解python logging日志传输
2020/07/01 Python
Python局部变量与全局变量区别原理解析
2020/07/14 Python
Sunglasses Shop瑞典:欧洲领先的太阳镜网上商店
2018/04/22 全球购物
销售经理工作职责
2014/02/03 职场文书
学习十八大报告感言
2014/02/04 职场文书
学生检讨书范文
2015/01/27 职场文书
项目经理岗位职责
2015/01/31 职场文书
四十年同学聚会致辞
2015/07/28 职场文书
《绝招》教学反思
2016/02/20 职场文书
浅谈:电影《孔子》观后感(范文)
2019/10/14 职场文书