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 相关文章推荐
仿谷歌主页js动画效果实现代码
Jul 14 Javascript
解析jQuery的三种bind/One/Live事件绑定使用方法
Dec 30 Javascript
JavaScript中的Math.E属性使用详解
Jun 12 Javascript
精通JavaScript的this关键字
May 28 Javascript
javascript中错误使用var造成undefined
Mar 31 Javascript
JQuery Mobile 弹出式登录框的实现方法
May 28 Javascript
原生js中ajax访问的实例详解
Sep 19 Javascript
Express之托管静态文件的方法
Jun 01 Javascript
解决koa2 ctx.render is not a function报错问题
Aug 07 Javascript
基于vue v-for 多层循环嵌套获取行数的方法
Sep 26 Javascript
vue使用axios实现excel文件下载的功能
Jul 16 Javascript
jquery实现点击左右按钮切换图片
Jan 27 jQuery
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
PHP number_format() 函数定义和用法
2012/06/01 PHP
php arsort 数组降序排序详细介绍
2016/11/17 PHP
PHP验证终端类型是否为手机的简单实例
2017/02/07 PHP
Javascript的IE和Firefox兼容性汇编(zz)
2007/02/02 Javascript
jQuery 表单验证扩展代码(二)
2010/10/20 Javascript
浅谈JavaScript编程语言的编码规范
2011/10/21 Javascript
Jquery 跨域访问 Lightswitch OData Service的方法
2013/09/11 Javascript
JS实现定时页面弹出类似QQ新闻的提示框
2013/11/07 Javascript
Javascript加载速度慢的解决方案
2014/03/11 Javascript
javascript的日期对象、数组对象、二维数组使用说明
2014/12/22 Javascript
javascript十六进制及二进制转化的方法
2015/05/06 Javascript
纯javascript模仿微信打飞机小游戏
2015/08/20 Javascript
微信小程序 中wx.chooseAddress(OBJECT)实例详解
2017/03/31 Javascript
JavaScript之underscore_动力节点Java学院整理
2017/07/03 Javascript
浅谈手写node可读流之流动模式
2018/06/01 Javascript
解决layui 三级联动下拉框更新时回显的问题
2019/09/03 Javascript
JavaScript中的函数申明、函数表达式、箭头函数
2019/12/06 Javascript
Vue的props父传子的示例代码
2020/05/20 Javascript
Python 列表排序方法reverse、sort、sorted详解
2016/01/22 Python
Python实现对特定列表进行从小到大排序操作示例
2019/02/11 Python
python保存字典和读取字典的实例代码
2019/07/07 Python
Python交互式图形编程的实现
2019/07/25 Python
解决Django中调用keras的模型出现的问题
2019/08/07 Python
python实现七段数码管和倒计时效果
2019/11/23 Python
Python 装饰器原理、定义与用法详解
2019/12/07 Python
基于python求两个列表的并集.交集.差集
2020/02/10 Python
资产经营总监岗位职责范文
2013/12/01 职场文书
开学典礼主持词
2014/03/19 职场文书
创先争优一句话承诺
2014/05/29 职场文书
宣传标语大全
2014/07/01 职场文书
审计局2014法制宣传日活动总结
2014/11/01 职场文书
2015年服务员工作总结
2015/04/08 职场文书
个人求职意向书
2015/05/11 职场文书
考研英语辞职信
2015/05/13 职场文书
任命书格式范文
2015/09/22 职场文书
一定要知道的 25 个 Vue 技巧
2021/11/02 Vue.js