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 相关文章推荐
jquery中eq和get的区别与使用方法
Apr 14 Javascript
document.write()及其输出内容的样式、位置控制
Aug 12 Javascript
异步动态加载JS并运行(示例代码)
Dec 13 Javascript
javascript实现简单的Map示例介绍
Dec 23 Javascript
Javascript中数组sort和reverse用法分析
Dec 30 Javascript
jQuery左侧大图右侧小图焦点图幻灯切换代码分享
Aug 19 Javascript
js滑动提示效果代码分享
Mar 10 Javascript
JavaScript重定向URL参数的两种方法小结
Oct 19 Javascript
react-redux中connect()方法详细解析
May 27 Javascript
浅谈ES6新增的数组方法和对象
Aug 08 Javascript
vue Element-ui input 远程搜索与修改建议显示模版的示例代码
Oct 19 Javascript
对layui初始化列表的CheckBox属性详解
Sep 13 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
网友原创的PHP模板类代码
2008/09/07 PHP
PHPStrom 新建FTP项目以及在线操作教程
2016/10/16 PHP
javascript正则表达式中参数g(全局)的作用
2010/11/11 Javascript
JS定义回车事件(实现代码)
2013/07/08 Javascript
javascript实现多栏闭合展开式广告位菜单效果实例
2015/08/05 Javascript
实例讲解使用原生JavaScript处理AJAX请求的方法
2016/05/10 Javascript
vue实现ToDoList简单实例
2017/02/07 Javascript
vue基于Vue2.0和高德地图的地图组件实例
2017/04/28 Javascript
浅谈angularJS的$watch失效问题的解决方案
2017/08/11 Javascript
vue+vuecli+webpack中使用mockjs模拟后端数据的示例
2017/10/24 Javascript
javaScript中&quot;==&quot;和&quot;===&quot;的区别详解
2018/03/16 Javascript
mocha的时序规则讲解
2019/02/16 Javascript
详解Nodejs get获取远程服务器接口数据
2019/03/26 NodeJs
NodeJs 模仿SIP话机注册的方法
2019/06/21 NodeJs
vue项目中使用多选框的实例代码
2020/07/22 Javascript
JS时间戳与日期格式互相转换的简单方法示例
2021/01/30 Javascript
JS+JQuery实现无缝连接轮播图
2020/12/30 jQuery
详解js创建对象的几种方式和对象方法
2021/03/01 Javascript
python计数排序和基数排序算法实例
2014/04/25 Python
python开发之文件操作用法实例
2015/11/13 Python
详解Django的CSRF认证实现
2018/10/09 Python
pygame实现非图片按钮效果
2019/10/29 Python
详解centos7+django+python3+mysql+阿里云部署项目全流程
2019/11/15 Python
pycharm 2018 激活码及破解补丁激活方式
2020/09/21 Python
使用HTML5做个画图板的方法介绍
2013/05/03 HTML / CSS
详解基于canvas的视频遮罩插件
2018/01/04 HTML / CSS
美体小铺加拿大官方网站:The Body Shop加拿大
2016/10/30 全球购物
玩具反斗城西班牙网上商城:ToysRUs西班牙
2017/01/19 全球购物
澳大利亚墨水站Ink Station:墨水和碳粉打印机墨盒
2019/03/24 全球购物
工厂保洁员岗位职责
2013/12/04 职场文书
医生个人年度总结
2015/02/28 职场文书
老乡聚会通知
2015/04/23 职场文书
实习指导老师意见
2015/06/04 职场文书
校园新闻稿范文
2015/07/18 职场文书
出纳2015年度工作总结范文
2015/10/14 职场文书
读《儒林外史》有感:少一些功利,多一些真诚
2020/01/19 职场文书