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 相关文章推荐
基于Web标准的UI组件 — 树状菜单(2)
Sep 18 Javascript
Jquery+ajax请求data显示在GridView上(asp.net)
Aug 27 Javascript
jQuery 源码分析笔记(4) Ready函数
Jun 02 Javascript
js截取小数点后几位的写法
Nov 14 Javascript
Jquery+ajax+JAVA(servlet)实现下拉菜单异步取值
Mar 23 Javascript
javaScript 逻辑运算符使用技巧整理
May 03 Javascript
Vue.js鼠标悬浮更换图片功能
May 17 Javascript
vue系列之动态路由详解【原创】
Sep 10 Javascript
javascript匿名函数中的'return function()'作用
Oct 15 Javascript
JavaScript的变量声明与声明提前用法实例分析
Nov 26 Javascript
使用JS location实现搜索框历史记录功能
Dec 23 Javascript
微信小程序复选框实现多选一功能过程解析
Feb 14 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
定制404错误页面,并发信给管理员的程序
2006/10/09 PHP
PHP下通过系统信号量加锁方式获取递增序列ID
2009/09/25 PHP
php中通过虚代理实现延迟加载的实现代码
2011/06/10 PHP
9个PHP开发常用功能函数小结
2011/07/15 PHP
简单实现php上传文件功能
2017/09/21 PHP
基于jquery的页面划词搜索JS
2010/09/14 Javascript
js转义字符介绍
2013/11/05 Javascript
Node.js的Express框架使用上手指南
2016/03/12 Javascript
jQuery实例—选项卡的简单实现(js源码和jQuery)
2016/06/14 Javascript
jQuery插件实现可输入和自动匹配的下拉框
2016/10/24 Javascript
js手机号批量滚动抽奖实现代码
2020/04/17 Javascript
Javascript面试经典套路reduce函数查重
2017/03/23 Javascript
深入理解JavaScript 参数按值传递
2017/05/24 Javascript
Node.js中流(stream)的使用方法示例
2017/07/16 Javascript
详解Node使用Puppeteer完成一次复杂的爬虫
2018/04/18 Javascript
vue随机验证码组件的封装实现
2020/02/19 Javascript
Vue中 axios delete请求参数操作
2020/08/25 Javascript
nuxt 服务器渲染动态设置 title和seo关键字的操作
2020/11/05 Javascript
微信小程序调用后台service教程详解
2020/11/06 Javascript
[56:42]VP vs RNG 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
对PyTorch torch.stack的实例讲解
2018/07/30 Python
python通过链接抓取网站详解
2019/11/20 Python
简单了解python列表和元组的区别
2020/05/14 Python
Pytorch使用PIL和Numpy将单张图片转为Pytorch张量方式
2020/05/25 Python
Pytorch1.5.1版本安装的方法步骤
2020/12/31 Python
使用canvas生成含有微信头像的邀请海报没有微信头像问题
2019/10/29 HTML / CSS
Sephora丝芙兰泰国官方网站:国际知名化妆品购物
2017/11/15 全球购物
家庭睡衣和家庭用品:Little Blue House
2018/03/18 全球购物
测控技术与通信工程毕业生自荐信范文
2013/12/28 职场文书
幼儿教师培训感言
2014/03/08 职场文书
珍惜水资源建议书
2014/03/12 职场文书
高中课前三分钟演讲稿
2014/09/13 职场文书
高中生国庆节演讲稿范文2014
2014/09/21 职场文书
北京青年观后感
2015/06/15 职场文书
Vue.js中v-for指令的用法介绍
2022/03/13 Vue.js
python如何查找列表中元素的位置
2022/05/30 Python