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 相关文章推荐
JavaScript获取GridView选择的行内容
Apr 14 Javascript
基于JavaScript实现 获取鼠标点击位置坐标的方法
Apr 12 Javascript
jquery控制左右箭头滚动图片列表的实例
May 20 Javascript
简单封装js的dom查询实例代码
Jul 08 Javascript
jQuery过滤选择器经典应用
Aug 18 Javascript
微信小程序tabBar底部导航中文注解api详解
Aug 16 Javascript
浅谈Redux中间件的实践
Jul 27 Javascript
微信小程序云开发(数据库)详解
May 17 Javascript
js获取 gif 的帧数的代码实例
Sep 10 Javascript
vue 取出v-for循环中的index值实例
Nov 09 Javascript
浅谈vue权限管理实现及流程
Apr 23 Javascript
ES6新增的数组知识实例小结
May 23 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
通过dbi使用perl连接mysql数据库的方法
2014/04/16 PHP
PHP中preg_match函数正则匹配的字符串长度问题
2015/05/27 PHP
Yii实现的多级联动下拉菜单
2016/07/13 PHP
静态html文件执行php语句的方法(推荐)
2016/11/21 PHP
PHP实现绘制二叉树图形显示功能详解【包括二叉搜索树、平衡树及红黑树】
2017/11/16 PHP
Javascript操纵Cookie实现购物车程序
2007/02/15 Javascript
Discuz! 6.1_jQuery兼容问题
2008/09/23 Javascript
Web跨浏览器进程通信(Web跨域)
2013/04/17 Javascript
javascript数组去重的六种方法汇总
2015/08/16 Javascript
Node.js中使用jQuery的做法
2016/08/17 Javascript
JavaScript实现图片懒加载(Lazyload)
2016/11/28 Javascript
原生js实现可拖拽效果
2017/02/28 Javascript
vue如何判断dom的class
2018/04/26 Javascript
vue实例中data使用return包裹的方法
2018/08/27 Javascript
基于Vue 服务端Cookies删除的问题
2018/09/21 Javascript
JS返回页面时自动回滚到历史浏览位置
2018/09/26 Javascript
js实现多图和单图上传显示
2019/12/18 Javascript
你不知道的SpringBoot与Vue部署解决方案
2020/11/09 Javascript
Python操作列表之List.insert()方法的使用
2015/05/20 Python
Python的Django框架中设置日期和字段可选的方法
2015/07/17 Python
Pandas实现数据类型转换的一些小技巧汇总
2018/05/07 Python
Django中使用极验Geetest滑动验证码过程解析
2019/07/31 Python
基于Python新建用户并产生随机密码过程解析
2019/10/08 Python
Django对接支付宝实现支付宝充值金币功能示例
2019/12/17 Python
python中的yield from语法快速学习
2020/11/06 Python
优秀老员工获奖感言
2014/02/15 职场文书
调解协议书
2014/04/16 职场文书
音乐兴趣小组活动总结
2014/07/07 职场文书
在教室放鞭炮的检讨书
2014/09/28 职场文书
2014年计生协会工作总结
2014/11/21 职场文书
质检员工作总结2015
2015/04/25 职场文书
硕士论文致谢范文
2015/05/14 职场文书
英雄儿女观后感
2015/06/09 职场文书
学习型家庭事迹材料(2016精选版)
2016/02/29 职场文书
使用RedisTemplat实现简单的分布式锁
2021/11/20 Redis
Mysql调整优化之四种分区方式以及组合分区
2022/04/13 MySQL