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 globalStorage类代码
Jun 04 Javascript
JS继承 笔记
Jul 13 Javascript
jquery.artwl.thickbox.js  一个非常简单好用的jQuery弹出层插件
Mar 01 Javascript
JS替换文本域内的回车示例
Feb 18 Javascript
原生JS实现图片轮播切换效果
Dec 15 Javascript
详解jQuery简单的表单应用
Dec 16 Javascript
JS实现拖拽的方法分析
Dec 20 Javascript
node.JS md5加密中文与php结果不一致的解决方法
May 05 Javascript
js实现移动端轮播图效果
Dec 09 Javascript
利用JS动态生成隔行换色HTML表格的两种方法
Oct 09 Javascript
JavaScript编写开发动态时钟
Jul 29 Javascript
基于原生JS封装的Modal对话框插件的示例代码
Sep 09 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
一个取得文件扩展名的函数
2006/10/09 PHP
DedeCms模板安装/制作概述
2007/03/11 PHP
php session 检测和注销
2009/03/16 PHP
Zend的MVC机制使用分析(二)
2013/05/02 PHP
给ECShop添加最新评论
2015/01/07 PHP
YII框架关联查询操作示例
2019/04/29 PHP
javascript调试说明
2010/06/07 Javascript
jquery交替变换颜色的三种方法 实例代码
2013/11/19 Javascript
在JavaScript中操作时间之getYear()方法的使用教程
2015/06/11 Javascript
简介JavaScript中的setTime()方法的使用
2015/06/11 Javascript
简要了解jQuery移动web开发的响应式布局设计
2015/12/04 Javascript
浅谈jquery高级方法描述与应用
2016/10/04 Javascript
JS图片预加载插件详解
2017/06/21 Javascript
vue根据进入的路由进行原路返回的方法
2018/09/26 Javascript
Vue中使用matomo进行访问流量统计的实现
2019/11/05 Javascript
JavaScript中继承原理与用法实例入门
2020/05/09 Javascript
js实现直播点击飘心效果
2020/08/19 Javascript
[54:51]Ti4 冒泡赛第二轮LGD vs C9 3
2014/07/14 DOTA
[06:07]辉夜杯现场观众互动 “比谁远送显示器”
2015/12/26 DOTA
利用Psyco提升Python运行速度
2014/12/24 Python
matplotlib中legend位置调整解析
2017/12/19 Python
python利用openpyxl拆分多个工作表的工作簿的方法
2019/09/27 Python
Pandas时间序列:重采样及频率转换方式
2019/12/26 Python
Pycharm 2020最新永久激活码(附最新激活码和插件)
2020/09/17 Python
keras的siamese(孪生网络)实现案例
2020/06/12 Python
CSS3 Media Queries详细介绍和使用实例
2014/05/08 HTML / CSS
中国旅游网站:途牛旅游网
2019/09/29 全球购物
维多利亚的秘密阿联酋官网:Victoria’s Secret阿联酋
2019/12/07 全球购物
新大陆软件面试题
2016/11/24 面试题
餐饮收银员岗位职责
2014/02/07 职场文书
婚礼主持词开场白
2014/03/13 职场文书
商务助理求职信范文
2014/04/20 职场文书
生产车间主任岗位职责
2015/04/08 职场文书
汽车销售合同文本
2019/08/08 职场文书
Pygame如何使用精灵和碰撞检测
2021/11/17 Python
Python&Matlab实现灰狼优化算法的示例代码
2022/03/21 Python