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 迁移目录
Dec 18 Javascript
基于jquery的横向滚动条(滑动条)
Feb 24 Javascript
Javascript base64编码实现代码
Dec 02 Javascript
jquery遍历函数siblings()用法实例
Dec 24 Javascript
Angular 2父子组件数据传递之@Input和@Output详解(下)
Jul 05 Javascript
NW.js 简介与使用方法
Feb 01 Javascript
LayerClose弹窗关闭刷新方法
Aug 17 Javascript
Vue-router的使用和出现空白页,路由对象属性详解
Sep 03 Javascript
vue2.0 可折叠列表 v-for循环展示的实例
Sep 07 Javascript
浅谈angular2子组件的事件传递(任意组件事件传递)
Sep 30 Javascript
浅谈高大上的微信小程序中渲染html内容—技术分享
Oct 25 Javascript
ant design 日期格式化的实现
Oct 27 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
laravel5.4生成验证码的实例讲解
2017/08/05 PHP
使用composer命令加载vendor中的第三方类库 的方法
2019/07/09 PHP
使用laravel的migrate创建数据表的方法
2019/09/30 PHP
jquery中的sortable排序之后的保存状态的解决方法
2010/01/28 Javascript
禁用Tab键JS代码兼容Firefox和IE
2014/04/18 Javascript
如何判断微信内置浏览器(通过User Agent实现)
2014/09/01 Javascript
jquery实现搜索框常见效果的方法
2015/01/22 Javascript
PHP实现的各种中文编码转换类分享
2015/01/23 Javascript
jQuery实现表格展开与折叠的方法
2015/05/04 Javascript
jQuery表格行上移下移和置顶的实现方法
2015/10/08 Javascript
jQuery实现简单隔行变色的方法
2016/02/20 Javascript
js实现上一页下一页的效果【附代码】
2016/03/10 Javascript
关于JS 预解释的相关理解
2016/06/28 Javascript
vue.js通过自定义指令实现数据拉取更新的实现方法
2016/10/18 Javascript
JavaScript html5利用FileReader实现上传功能
2020/03/27 Javascript
从源码看angular/material2 中 dialog模块的实现方法
2017/10/18 Javascript
微信小程序如何调用图片接口API并居中显示
2019/06/29 Javascript
python中使用urllib2伪造HTTP报头的2个方法
2014/07/07 Python
Python multiprocessing.Manager介绍和实例(进程间共享数据)
2014/11/21 Python
用Python脚本来删除指定容量以上的文件的教程
2015/05/04 Python
python使用PyGame模块播放声音的方法
2015/05/20 Python
python中的闭包函数
2018/02/09 Python
python字符串,元组,列表,字典互转代码实例详解
2020/02/14 Python
苹果中国官方网站:Apple中国
2016/07/22 全球购物
Oakley西班牙官方商店:太阳眼镜和男女运动服
2019/04/26 全球购物
腾讯技术类校园招聘笔试试题
2014/05/06 面试题
质量工程师岗位职责
2013/11/16 职场文书
业务助理岗位职责
2013/11/18 职场文书
幼儿园教育教学反思
2014/01/31 职场文书
医药类个人求职的自我评价
2014/02/12 职场文书
《菜园里》教学反思
2014/04/17 职场文书
工作评语大全
2014/04/26 职场文书
审计局班子四风对照检查材料思想汇报
2014/10/07 职场文书
假释思想汇报范文
2014/10/11 职场文书
自主招生推荐信格式模板
2015/03/24 职场文书
工作报告范文
2019/06/20 职场文书