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 相关文章推荐
页面只能打开一次Cooike如何实现
Dec 04 Javascript
jquery实现点击label的同时触发文本框点击事件的方法
Jun 05 Javascript
javascript图片预加载完整实例
Dec 10 Javascript
Javascript实现图片不间断滚动的代码
Jun 22 Javascript
JavaScript实现横线提示输入验证码随输入验证码输入消失的方法
Sep 24 Javascript
js, jQuery实现全选、反选功能
Mar 08 Javascript
详解用webpack2.0构建vue2.0超详细精简版
Apr 05 Javascript
JavaScript使用ZeroClipboard操作剪切板
May 10 Javascript
vue.js整合mint-ui里的轮播图实例代码
Dec 27 Javascript
解决node修改后需频繁手动重启的问题
May 13 Javascript
js实现倒计时器自定义时间和暂停
Feb 25 Javascript
使用 Opentype.js 生成字体子集的实例代码详解
May 25 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
上传文件先创建目录 再上传到目录里面去
2010/12/29 PHP
php上传图片到指定位置路径保存到数据库的具体实现
2013/12/30 PHP
Zend Framework入门教程之Zend_Config组件用法详解
2016/12/09 PHP
PHP实现的基于单向链表解决约瑟夫环问题示例
2017/09/30 PHP
javascript编程起步(第五课)
2007/01/10 Javascript
基于JQuery 的消息提示框效果代码
2011/07/31 Javascript
js取滚动条的尺寸的函数代码
2011/11/30 Javascript
IE6背景图片不缓存问题解决方案及图片使用策略多个方法小结
2012/05/14 Javascript
javascript使用isNaN()函数判断变量是否为数字
2013/09/21 Javascript
javascript中AJAX用法实例分析
2015/01/30 Javascript
基于jQuery实现多标签页切换的效果(web前端开发)
2016/07/24 Javascript
Bootstrap Table使用方法详解
2016/08/01 Javascript
禁用backspace网页回退功能的实现代码
2016/11/15 Javascript
jQuery仿IOS弹出框插件
2017/02/18 Javascript
关于Angular2 + node接口调试的解决方案
2017/05/28 Javascript
webpack构建换肤功能的思路详解
2017/11/27 Javascript
微信小程序获取手机网络状态的方法【附源码下载】
2017/12/08 Javascript
vue实现样式之间的切换及vue动态样式的实现方法
2017/12/19 Javascript
jQuery简单实现的HTML页面文本框模糊匹配查询功能完整示例
2018/05/09 jQuery
解决Vue 给mapState中定义的属性赋值报错的问题
2020/06/22 Javascript
[01:11:11]Alliance vs RNG 2019国际邀请赛淘汰赛 败者组BO1 8.20.mp4
2020/07/19 DOTA
Python切片知识解析
2016/03/06 Python
python文本数据相似度的度量
2018/03/12 Python
Python实现获取汉字偏旁部首的方法示例【测试可用】
2018/12/18 Python
Scrapy-Redis结合POST请求获取数据的方法示例
2019/05/07 Python
PyTorch笔记之scatter()函数的使用
2020/02/12 Python
Python对称的二叉树多种思路实现方法
2020/02/28 Python
Tensorflow中k.gradients()和tf.stop_gradient()用法说明
2020/06/10 Python
JAVA中运算符的分类及举例
2015/09/12 面试题
应届大学毕业生找工作的求职信范文
2013/11/29 职场文书
培训楼经理岗位责任制
2014/02/10 职场文书
秋游活动策划方案
2014/02/16 职场文书
人身损害赔偿协议书范本
2014/09/27 职场文书
2015年世界环境日活动总结
2015/02/11 职场文书
2015社区精神文明建设工作总结
2015/04/21 职场文书
浅谈redis缓存在项目中的使用
2021/05/20 Redis