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 相关文章推荐
使用JSLint提高JS代码质量方法分享
Dec 16 Javascript
jQuery 中国省市两级联动选择附图
May 14 Javascript
node.js正则表达式获取网页中所有链接的代码实例
Jun 03 Javascript
Jquery实现兼容各大浏览器的Enter回车切换输入焦点的方法
Sep 01 Javascript
jquery常用方法及使用示例汇总
Nov 08 Javascript
jquery实现侧边弹出的垂直导航
Dec 09 Javascript
浅谈jquery的html方法里包含特殊字符的处理
Nov 30 Javascript
bootstrap组件之导航组件使用方法
Jan 19 Javascript
Element input树型下拉框的实现代码
Dec 21 Javascript
详解微信小程序开发用户授权登陆
Apr 24 Javascript
微信小程序一周时间表功能实现
Oct 17 Javascript
浅析JavaScript中的事件委托机制跟深浅拷贝
Jan 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
JQuery1.4+ Ajax IE8 内存泄漏问题
2010/10/15 Javascript
js获取当前日期前七天的方法
2015/02/28 Javascript
JS实现黑客帝国文字下落效果
2015/09/01 Javascript
详解Javascript模板引擎mustache.js
2016/01/20 Javascript
javascript之with的使用(阿里云、淘宝使用代码分析)
2016/10/11 Javascript
jQuery Validate让普通按钮触发表单验证的方法
2016/12/15 Javascript
Bootstrap CSS组件之面包屑导航(breadcrumb)
2016/12/17 Javascript
JavaScript编写一个贪吃蛇游戏
2017/03/09 Javascript
Vue.js实现模拟微信朋友圈开发demo
2017/04/20 Javascript
Vue项目中引入外部文件的方法(css、js、less)
2017/07/24 Javascript
vue本地打开build后生成的dist文件夹index.html问题
2019/09/04 Javascript
JavaScript实现网页计算器功能
2020/10/29 Javascript
Python八大常见排序算法定义、实现及时间消耗效率分析
2018/04/27 Python
python使用代理ip访问网站的实例
2018/05/07 Python
Python判断字符串是否为字母或者数字(浮点数)的多种方法
2018/08/03 Python
python中的tcp示例详解
2018/12/09 Python
python爬虫基础教程:requests库(二)代码实例
2019/04/09 Python
Django的用户模块与权限系统的示例代码
2019/07/24 Python
Python字符串格式化输出代码实例
2019/11/22 Python
Python中flatten( ),matrix.A用法说明
2020/07/05 Python
HTML5 Canvas图像模糊完美解决办法
2018/02/06 HTML / CSS
BISSELL官网:北美吸尘器第一品牌
2019/03/14 全球购物
Europcar澳大利亚官网:全球汽车租赁领域的领导者
2019/03/24 全球购物
Jacadi Paris英国官网:法国童装品牌
2019/08/09 全球购物
俄罗斯一家时尚女装商店:Charuel
2019/12/04 全球购物
Ashford台湾:以折扣价提供奢华的男女用表款
2019/12/04 全球购物
澳大利亚排名第一的露营和户外设备在线零售商:Outbax
2020/05/06 全球购物
班长岗位职责
2013/11/10 职场文书
初中三好学生事迹材料
2014/01/13 职场文书
网吧消防安全责任书
2014/07/29 职场文书
建设工程授权委托书
2014/09/22 职场文书
企业法人授权委托书
2014/09/25 职场文书
党员批评与自我批评发言
2014/10/02 职场文书
冲出亚马逊观后感
2015/06/03 职场文书
Python使用protobuf序列化和反序列化的实现
2021/05/19 Python
Django数据库(SQlite)基本入门使用教程
2022/07/07 Python