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 相关文章推荐
层序遍历在ExtJs的TreePanel中的应用
Oct 16 Javascript
JavaScript 面向对象编程(2) 定义类
May 18 Javascript
Wordpress ThickBox 点击图片显示下一张图的修改方法
Dec 11 Javascript
Struts2的s:radio标签使用及用jquery添加change事件
Apr 08 Javascript
JavaScript中的类数组对象介绍
Dec 30 Javascript
javascript删除元素节点removeChild()用法实例
May 26 Javascript
详解前后端分离之VueJS前端
May 24 Javascript
JavaScript实现三级联动菜单效果
Aug 16 Javascript
EasyUI框架 使用Ajax提交注册信息的实现代码
Sep 27 Javascript
javascript高仿热血传奇游戏实现代码
Feb 22 Javascript
简化版的vue-router实现思路详解
Oct 19 Javascript
微信公众号开发之微信支付代码记录的实现
Oct 16 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
第二节--PHP5 的对象模型
2006/11/16 PHP
main.php
2006/12/09 PHP
PHP 的 __FILE__ 常量
2007/01/15 PHP
php语言流程控制中的主动与被动
2012/11/05 PHP
PHP @ at 记号的作用示例介绍
2014/10/10 PHP
利用phpexcel对数据库数据的导入excel(excel筛选)、导出excel
2017/04/27 PHP
Prototype Date对象 学习
2009/07/12 Javascript
利用jQuery接受和处理xml数据的代码(.net)
2011/03/28 Javascript
Javascript实现带关闭按钮的网页漂浮广告代码
2014/01/12 Javascript
JS实现同一个网页布局滑动门和TAB选项卡实例
2015/09/23 Javascript
jquery validate.js表单验证入门实例(附源码)
2015/11/10 Javascript
微信小程序 网络API发起请求详解
2016/11/09 Javascript
tablesorter.js表格排序使用方法(支持中文排序)
2017/02/10 Javascript
BootStrap实现鼠标悬停下拉列表功能
2017/02/17 Javascript
详解VUE单页应用骨架屏方案
2019/01/17 Javascript
Python使用django框架实现多人在线匿名聊天的小程序
2017/11/29 Python
python实现用户管理系统
2018/01/10 Python
python3调用R的示例代码
2018/02/23 Python
python逆序打印各位数字的方法
2018/06/25 Python
对Python random模块打乱数组顺序的实例讲解
2018/11/08 Python
解析Python的缩进规则的使用
2019/01/16 Python
python字符串Intern机制详解
2019/07/01 Python
Django中create和save方法的不同
2019/08/13 Python
Anaconda3+tensorflow2.0.0+PyCharm安装与环境搭建(图文)
2020/02/18 Python
京东奢侈品:全球奢侈品牌
2018/03/17 全球购物
英国在线女鞋目的地:SIMMI
2018/12/27 全球购物
2013年学期结束动员演讲稿
2014/01/07 职场文书
商场促销活动方案
2014/02/08 职场文书
安全教育感言
2014/03/04 职场文书
办公室领导干部作风整顿个人整改措施
2014/09/17 职场文书
公务员政审材料
2014/12/23 职场文书
2015秋季新学期开学寄语
2015/05/28 职场文书
民政局2016年“六一”儿童节慰问活动总结
2016/04/06 职场文书
创业计划书之旅游网站
2019/09/06 职场文书
总结一些Java常用的加密算法
2021/06/11 Java/Android
Win11怎么跳过联网验机 ?Win11跳过联网验机激活教程
2022/04/05 数码科技