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实现在同一窗口浏览图片
Sep 17 Javascript
探究Vue.js 2.0新增的虚拟DOM
Oct 20 Javascript
javaScript中定义类或对象的五种方式总结
Dec 04 Javascript
js canvas实现QQ拨打电话特效
May 10 Javascript
解决BootStrap Fileinput手机图片上传显示旋转问题
Jun 01 Javascript
利用vue组件自定义v-model实现一个Tab组件方法示例
Dec 06 Javascript
详解Vue.directive 自定义指令
Mar 27 Javascript
详解Vue项目引入CreateJS的方法(亲测可用)
May 30 Javascript
小程序实现分类页
Jul 12 Javascript
微信小程序日历插件代码实例
Dec 04 Javascript
在Vue.js中使用TypeScript的方法
Mar 19 Javascript
jQuery ajax - getScript() 方法和getJSON方法
May 14 jQuery
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中利用substr_replace将指定两位置之间的字符替换为*号
2011/01/27 PHP
php动态添加url查询参数的方法
2015/04/14 PHP
前端必学之PHP语法基础
2016/01/01 PHP
PHP常用操作类之通信数据封装类的实现
2017/07/16 PHP
拖动一个HTML元素
2006/12/22 Javascript
javascript中的对象和数组的应用技巧
2007/01/07 Javascript
把textarea中字符串里含有的回车换行替换成<br>的javascript代码
2007/04/20 Javascript
js 绑定带参数的事件以及手动触发事件
2010/04/27 Javascript
读jQuery之十一 添加事件核心方法
2011/07/31 Javascript
JS实现控制表格行文本对齐的方法
2015/03/30 Javascript
基于jQuery实现音乐播放试听列表
2016/04/14 Javascript
jQuery处理XML文件的几种方法
2016/06/14 Javascript
js数组的五种迭代方法及两种归并方法(推荐)
2016/06/14 Javascript
JS打印组合功能
2016/08/04 Javascript
微信小程序 页面跳转传递值几种方法详解
2017/01/12 Javascript
分析JavaScript数组操作难点
2017/12/18 Javascript
vue+element实现批量删除功能的示例
2018/02/28 Javascript
webpack 样式加载的实现原理
2018/06/12 Javascript
JS原生带缩略图的图片切换效果
2018/10/10 Javascript
解决新建一个vue项目过程中遇到的问题
2020/10/22 Javascript
python中map()与zip()操作方法
2016/02/27 Python
Python语言生成水仙花数代码示例
2017/12/18 Python
解决python3 urllib 链接中有中文的问题
2018/07/16 Python
对Pycharm创建py文件时自定义头部模板的方法详解
2019/02/12 Python
Python进阶:生成器 懒人版本的迭代器详解
2019/06/29 Python
详解如何在PyCharm控制台中输出彩色文字和背景
2020/08/17 Python
css3 iphone玻璃透明气泡完美实现
2013/03/20 HTML / CSS
Ajax主要包含了哪些技术
2014/06/12 面试题
护士专业推荐信
2013/11/02 职场文书
毕业设计计划书
2014/01/09 职场文书
新学期校长寄语
2014/01/18 职场文书
2014向国旗敬礼网上签名活动总结
2014/09/27 职场文书
2014年档案室工作总结
2014/12/01 职场文书
2015年人力资源工作总结
2015/04/08 职场文书
学习党史心得体会2016
2016/01/23 职场文书
nginx处理http请求实现过程解析
2021/03/31 Servers