HTML页面滚动时获取离页面顶部的距离2种实现方法


Posted in Javascript onSeptember 05, 2013

方法一:DOM

<script> 
window.onscroll = function() { 
console.info(window.scrollY); 
} 
</script>

注册onscroll事件,在控制台(按F12)打印当前页面距离页面顶部的距离(单位:像素px)

方法二:jQuery

$(function() { 
$(window).scroll(function() { 
console.info($(window).scrollTop()); 
}); 
});

调用window对象的scroll方法注册滚动事件,调用window对象的scrollTop方法,意义同scrollY属性。
Javascript 相关文章推荐
dojo 之基础篇(二)之从服务器读取数据
Mar 24 Javascript
javascript通过class来获取元素实现代码
Feb 20 Javascript
javascript浏览器窗口之间传递数据的方法
Jan 20 Javascript
js上传图片及预览功能实例分析
Apr 24 Javascript
jQuery限制图片大小的方法
May 25 Javascript
Angular中使用ui router实现系统权限控制及开发遇到问题
Sep 23 Javascript
微信小程序  audio音频播放详解及实例
Nov 02 Javascript
微信小程序获取手机系统信息的方法【附源码下载】
Dec 07 Javascript
QQ跳转支付宝并自动领红包脚本(最新)
Jun 22 Javascript
three.js实现炫酷的全景3D重力感应
Dec 30 Javascript
简单实现vue中的依赖收集与响应的方法
Feb 18 Javascript
VsCode与Node.js知识点详解
Sep 05 Javascript
JavaScript移除数组元素减少长度的方法
Sep 05 #Javascript
js编码、解码函数介绍及其使用示例
Sep 05 #Javascript
Jquery中给animation加更多的运作效果实例
Sep 05 #Javascript
Jquery增加鼠标中间功能mousewheel的实例代码
Sep 05 #Javascript
jQuery关于导航条背景切换效果实现示例
Sep 04 #Javascript
JS控制阿拉伯数字转为中文大写示例代码
Sep 04 #Javascript
JS如何将UTC格式时间转本地格式
Sep 04 #Javascript
You might like
调频问题解答
2021/03/01 无线电
PHP中strtr字符串替换用法详解
2014/11/26 PHP
php使用pdo连接sqlite3的配置示例
2016/05/27 PHP
PHP文件系统管理(实例讲解)
2017/09/19 PHP
Jquery 滑入滑出效果实现代码
2010/03/27 Javascript
纯CSS打造的导航菜单(附jquery版)
2010/08/07 Javascript
深入理解JavaScript系列(7) S.O.L.I.D五大原则之开闭原则OCP
2012/01/15 Javascript
jquery常用特效方法使用示例
2014/04/25 Javascript
jquery得到iframe src属性值的方法
2014/09/25 Javascript
javascript实现动态表头及表列的展现方法
2015/07/14 Javascript
js实现ctrl+v粘贴上传图片(兼容chrome、firefox、ie11)
2016/03/09 Javascript
JavaScript实现图片轮播组件代码示例
2016/11/22 Javascript
jQuery表格(Table)基本操作实例分析
2017/03/10 Javascript
Javascript 详解封装from表单数据为json串进行ajax提交
2017/03/29 Javascript
vue构建单页面应用实战
2017/04/10 Javascript
Vue.js中组件中的slot实例详解
2017/07/17 Javascript
iframe高度自适应及隐藏滚动条的实例详解
2017/09/29 Javascript
JS运动改变单物体透明度的方法分析
2018/01/23 Javascript
vue2.0页面前进刷新回退不刷新的实现方法
2018/07/31 Javascript
Javascript中parseInt的正确使用方式
2018/10/17 Javascript
详解angularjs4部署文件过大解决过程
2018/12/05 Javascript
用node.js写一个jenkins发版脚本
2019/05/21 Javascript
[52:26]完美世界DOTA2联赛决赛 FTD vs Phoenix 第一场 11.08
2020/11/11 DOTA
python进程管理工具supervisor的安装与使用教程
2017/09/05 Python
Python快速转换numpy数组中Nan和Inf的方法实例说明
2019/02/21 Python
利用pyuic5将ui文件转换为py文件的方法
2019/06/19 Python
python或C++读取指定文件夹下的所有图片
2019/08/31 Python
Django import export实现数据库导入导出方式
2020/04/03 Python
Python实现中英文全文搜索的示例
2020/12/04 Python
美国快时尚彩妆品牌:Winky Lux(透明花瓣润唇膏)
2018/11/06 全球购物
俄罗斯首家面向中国消费者的一站式购物网站:Wruru
2020/05/08 全球购物
计算机毕业大学生推荐信
2013/12/01 职场文书
创先争优活动党员公开承诺书
2014/08/29 职场文书
一个都不能少观后感
2015/06/04 职场文书
傅雷家书读书笔记
2015/06/29 职场文书
幼儿园小朋友毕业感言
2015/07/30 职场文书