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 相关文章推荐
WebGame《逆转裁判》完整版 代码下载(1月24日更新)
Jan 29 Javascript
javascript循环变量注册dom事件 之强大的闭包
Sep 08 Javascript
JavaScript bold方法入门实例(把指定文字显示为粗体)
Oct 17 Javascript
node.js中的fs.readFileSync方法使用说明
Dec 15 Javascript
jQuery实现的手机发送验证码倒计时效果代码分享
Aug 24 Javascript
微信小程序前端源码逻辑和工作流
Sep 25 Javascript
AngularJS 中使用Swiper制作滚动图不能滑动的解决方法
Nov 15 Javascript
vue2.0 中#$emit,$on的使用详解
Jun 07 Javascript
微信小程序--组件(swiper)详细介绍
Jun 13 Javascript
Vue路由切换时的左滑和右滑效果示例
May 29 Javascript
使用vue-cli3 创建vue项目并配置VS Code 自动代码格式化 vue语法高亮问题
May 14 Javascript
AngularJs中$cookies简单用法分析
May 30 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/11/16 PHP
php动态生成JavaScript代码
2009/03/09 PHP
php tp验证表单与自动填充函数代码
2012/02/22 PHP
比较好用的PHP防注入漏洞过滤函数代码
2012/04/11 PHP
PHP防止表单重复提交的几种常用方法汇总
2014/08/19 PHP
PHP实现获取文件后缀名的几种常用方法
2015/08/08 PHP
php中preg_replace_callback函数简单用法示例
2016/07/21 PHP
PHP getNamespaces()函数讲解
2019/02/03 PHP
PHP http请求超时问题解决方案
2020/11/13 PHP
JavaScript模板入门介绍
2012/09/26 Javascript
jquery easyui 对于开始时间小于结束时间的判断示例
2014/03/22 Javascript
浅谈js中的闭包
2015/03/16 Javascript
jQuery插件之Tocify动态节点目录菜单生成器附源码下载
2016/01/08 Javascript
基于JavaScript实现瀑布流效果(循环渐近)
2016/01/27 Javascript
Kindeditor在线文本编辑器如何过滤HTML
2016/04/14 Javascript
微信小程序 两种为对象属性赋值的方式详解
2017/02/23 Javascript
常用的几个JQuery代码片段
2017/03/13 Javascript
React+Antd+Redux实现待办事件的方法
2019/03/14 Javascript
layui实现左侧菜单点击右侧内容区显示
2019/07/26 Javascript
JS箭头函数和常规函数之间的区别实例分析【 5 个区别】
2020/05/27 Javascript
Vue+Java+Base64实现条码解析的示例
2020/09/23 Javascript
Python中使用items()方法返回字典元素对的教程
2015/05/21 Python
Python初学时购物车程序练习实例(推荐)
2017/08/08 Python
python数字图像处理之高级形态学处理
2018/04/27 Python
python如何创建TCP服务端和客户端
2018/08/26 Python
Python解析json时提示“string indices must be integers”问题解决方法
2019/07/31 Python
Python 类的魔法属性用法实例分析
2019/11/21 Python
python标准库OS模块详解
2020/03/10 Python
Python实现迪杰斯特拉算法过程解析
2020/09/18 Python
python自动打开浏览器下载zip并提取内容写入excel
2021/01/04 Python
图解CSS3制作圆环形进度条的实例教程
2016/05/26 HTML / CSS
保密协议书范本
2014/04/22 职场文书
离婚被告代理词
2015/05/23 职场文书
泰坦尼克号观后感
2015/06/04 职场文书
领导新年致辞2016
2015/07/29 职场文书
美国运营商 T-Mobile 以 117.83Mb/s 的速度排第一位
2022/04/21 数码科技