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模拟多线程
Feb 07 Javascript
javascript contains和compareDocumentPosition 方法来确定是否HTML节点间的关系
Feb 04 Javascript
基于MooTools的很有创意的滚动条时钟动画
Nov 14 Javascript
jquery.artwl.thickbox.js  一个非常简单好用的jQuery弹出层插件
Mar 01 Javascript
jQuery实现表格行上下移动和置顶效果
Jun 05 Javascript
JS实现的论坛Ajax打分效果完整实例
Oct 31 Javascript
Vue 2.0+Vue-router构建一个简单的单页应用(附源码)
Mar 14 Javascript
Angular模板表单校验方法详解
Aug 11 Javascript
浅谈VueJS SSR 后端绘制内存泄漏的相关解决经验
Dec 20 Javascript
图解javascript作用域链
May 27 Javascript
微信小程序实现抖音播放效果的实例代码
Apr 11 Javascript
分享15个Webpack实用的插件!!!
Mar 31 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
Laravel-添加后台模板AdminLte的实现方法
2019/10/08 PHP
限制文本字节数js代码
2007/03/06 Javascript
再谈IE中Flash控件的自动激活 ObjectWrap
2007/03/09 Javascript
JS对select控件option选项的增删改查示例代码
2013/10/21 Javascript
javascript实现无限级select联动菜单
2015/01/02 Javascript
javascript中局部变量和全局变量的区别详解
2015/02/27 Javascript
JS中产生标识符方式的演变
2015/06/12 Javascript
jquery实现简单的轮换出现效果实例
2015/07/23 Javascript
boostrapTable的refresh和refreshOptions区别浅析
2017/01/22 Javascript
推荐三款日期选择插件(My97DatePicker、jquery.datepicker、Mobiscroll)
2017/04/21 jQuery
详解node如何让一个端口同时支持https与http
2017/07/04 Javascript
JavaScript数组的5种迭代方法
2017/09/29 Javascript
JS模拟实现哈希表及应用详解
2018/05/04 Javascript
javascript 模块依赖管理的本质深入详解
2020/04/30 Javascript
Python中使用glob和rmtree删除目录子目录及所有文件的例子
2014/11/21 Python
使用django-guardian实现django-admin的行级权限控制的方法
2018/10/30 Python
详解DeBug Python神级工具PySnooper
2019/07/03 Python
python自动化UI工具发送QQ消息的实例
2019/08/27 Python
Python 实现日志同时输出到屏幕和文件
2020/02/19 Python
Pycharm 安装 idea VIM插件的图文教程详解
2020/02/21 Python
PyQt5+python3+pycharm开发环境配置教程
2020/03/24 Python
Python如何使用27行代码绘制星星图
2020/07/20 Python
python 用Matplotlib作图中有多个Y轴
2020/11/28 Python
HTML5新增加标签和功能概述
2016/09/05 HTML / CSS
JAVA的事件委托机制和垃圾回收机制
2014/09/07 面试题
早会主持词
2014/03/17 职场文书
勾股定理课后反思
2014/04/26 职场文书
硕士研究生就业推荐信
2014/05/18 职场文书
2014年教师政治学习材料
2014/06/02 职场文书
应届毕业生自荐书
2014/06/18 职场文书
竞选班干部演讲稿100字
2014/08/20 职场文书
北京颐和园导游词
2015/01/30 职场文书
PyQt5 QThread倒计时功能的实现代码
2021/04/02 Python
MySQL infobright的安装步骤
2021/04/07 MySQL
MySQL 使用事件(Events)完成计划任务
2021/05/24 MySQL
nodejs利用readline提示输入内容实例代码
2021/07/15 NodeJs