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函数
Jul 21 Javascript
JS backgroundImage控制
May 19 Javascript
js螺旋动画效果的具体实例
Nov 15 Javascript
JavaScript识别网页关键字并进行描红的方法
Nov 09 Javascript
JavaScript中0和""比较引发的问题
May 26 Javascript
修改jquery中dialog的title属性方法(推荐)
Aug 26 Javascript
简单实现JS上传图片预览功能
Apr 14 Javascript
vue基于Vue2.0和高德地图的地图组件实例
Apr 28 Javascript
Vue.js上下滚动加载组件的实例代码
Jul 17 Javascript
webpack+vuex+axios 跨域请求数据的示例代码
Mar 06 Javascript
webpack实现一个行内样式px转vw的loader示例
Sep 13 Javascript
基于JavaScript实现每日签到打卡轨迹功能
Nov 29 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
第四节 构造函数和析构函数 [4]
2006/10/09 PHP
完美解决令人抓狂的zend studio 7代码提示(content Assist)速度慢的问题
2013/06/20 PHP
模板引擎smarty工作原理以及使用示例
2014/05/25 PHP
Yii实现单用户博客系统文章详情页插入评论表单的方法
2015/12/28 PHP
解决FLASH需要点击激活的代码
2006/12/20 Javascript
JScript中使用ADODB.Stream判断文件编码的代码
2008/06/09 Javascript
JavaScript 函数replace深入了解
2013/03/14 Javascript
兼容IE、firefox以及chrome的js获取时间(getFullYear)
2014/07/04 Javascript
JavaScript中判断整字类型最简洁的实现方法
2014/11/08 Javascript
js与jquery回车提交的方法
2015/02/03 Javascript
jquery使用animate方法实现控制元素移动
2015/03/27 Javascript
Javascript中For In语句用法实例
2015/05/14 Javascript
9102年webpack4搭建vue项目的方法步骤
2019/02/20 Javascript
详解vue在项目中使用百度地图
2019/03/26 Javascript
python函数缺省值与引用学习笔记分享
2013/02/10 Python
Python实现简单的四则运算计算器
2016/11/02 Python
python rsa 加密解密
2017/03/20 Python
如何使用 Pylint 来规范 Python 代码风格(来自IBM)
2018/04/06 Python
python装饰器-限制函数调用次数的方法(10s调用一次)
2018/04/21 Python
python实现简易内存监控
2018/06/21 Python
python Django框架实现web端分页呈现数据
2019/10/31 Python
Python Selenium破解滑块验证码最新版(GEETEST95%以上通过率)
2021/01/29 Python
Melissa香港官网:MDreams
2016/07/01 全球购物
美国嘻哈文化生活方式品牌:GLD
2018/04/15 全球购物
C语言笔试题回忆
2015/04/02 面试题
经贸日语毕业生自荐信
2013/11/03 职场文书
土木工程专业推荐信
2014/02/19 职场文书
联欢晚会主持词
2014/03/25 职场文书
毕业生实习期转正自我鉴定
2014/09/26 职场文书
向国旗敬礼活动总结范文2014
2014/09/27 职场文书
向国旗敬礼学生寄语大全
2014/09/30 职场文书
11.9消防日宣传标语
2014/10/08 职场文书
教师学期末个人总结
2015/02/13 职场文书
导游词之蜀山胜景瓦屋山
2019/11/29 职场文书
vue实现无缝轮播效果(跑马灯)
2021/05/14 Vue.js
python opencv检测直线 cv2.HoughLinesP的实现
2021/06/18 Python