js获取页面高度以及jquery获取页面滚动距离scrollTop方法

已于 2025-05-07 07:27:15 修改
阅读量1.1k 收藏
点赞数 3
CC 4.0 BY-SA版权
分类专栏： javascript 文章标签： jquery javascript 前端
于 2022-05-10 16:53:30 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/m0_37948516/article/details/124692131
本文介绍了JavaScript中获取浏览器视口高度及整个页面高度的方法，以及如何计算元素相对于页面顶部的距离。通过原生和jQuery的方式展示了如何实现页面滚动至元素顶部的效果。这些技巧对于网页动态效果和交互设计至关重要。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

$(window).height(); //获取浏览器自身高度 也就是你浏览器所能看到的页面的那部分的高度 这个大小在你缩放浏览器窗口大小时 会改变
$(document).height(); //获取整个页面的高度
// 判断一个元素距离顶部的距离 比如底部元素footer距离页面顶部的距离
js原生写法：document.getElementById("footer").offsetTop;
jquery写法：$('#footer').offset.top();  
$('#footer').offset.top();  //返回footer元素距离顶部的位置 只读
$(window).scrollTop($('#footer').offset().top); //页面跳转到footer元素所在位置

JQuery获取浏览器窗口的可视区域高度和宽度,滚动条高度
12-26
JQuery获取浏览器窗口的可视区域高度和宽度,滚动条高度
jquery如何获取元素的滚动条高度等实现代码
10-23
首先，要理解滚动条高度通常是指元素内容超出其可视区域的部分，可以通过`scrollTop()`方法获取。例如，`$(document).scrollTop()`会返回当前页面滚动条距离顶部的垂直高度。而`$(window).scrollTop()`则会得到...
jquery如何获取元素的滚动高度
weixin_34376986的博客
07-04 606
获取浏览器显示区域（可视区域）的高度 ： $(window).height(); 获取浏览器显示区域（可视区域）的宽度 ： $(window).width(); 获取页面的文档高度 $(document).height(); 获取页面的文档宽度 ： $(document).width(); 浏览器当前窗口文档body的高度： $(docum...
【C# 自动化测试】借助js获取浏览器滚动条高度
最新发布
长期关注AI发展路径、技术价值转化与系统性落地。
05-20 385
本文总结了C#自动化测试中滚动条操作的核心语法与实战技巧。文章首先介绍了滚动控制的核心方法，包括scrollTo、scrollBy和scrollIntoView，并提供了获取滚动条位置和文档总高度的代码示例。
JQuery，JS获取正确scrollTop
jie1336950707的博客
11-02 4352
window.pageYOffset 被所有浏览器支持除了 IE 6, IE 7, IE 8, 不关doctype的事， 注IE9 开始支持此属性。 window.scrollY 被Firefox, Google Chrome , Safari支持 不关doctype的事, 注IE9 不支持此属性。 在（quirk 模式）的时候 document.body.scrollTop 在 Intern
jquery 获取页面和滚动条的高度
weixin_33786077的博客
04-19 1745
1、获取浏览器显示区域的高度 ： $(window).height(); 2、获取浏览器显示区域的宽度 ： $(window).width(); 3、获取页面的文档高度 ： $(document).height(); 4、获取页面的文档宽度 ： $(document).width(); 5、获取滚动条到顶部的垂直高度 ： ...
原生js获取scrollTop
beichen3997的博客
05-16 807
1、各浏览器下 scrollTop的差异 IE6/7/8： 对于没有doctype声明的页面里可以使用document.body.scrollTop来获取 scrollTop高度； 对于有doctype声明的页面则可以使用document.documentElement.scrollTop； Safari: safari 比较特别，有自己获取scrollTop的函数 ：win...
JS和JQUERY获取页面大小,滚动条位置,元素位置(示例代码)
10-26
同时，JQuery相关的示例代码展示了如何获取窗口的高度和宽度，页面的文档高度和宽度，以及如何使用`offset()`方法获取元素的偏移量。 总的来说，无论是使用纯JavaScript还是JQuery，都可以灵活地获取页面的尺寸、...
HTML页面滚动时获取离页面顶部的距离2种实现方法
09-05
使用jQuery获取滚动距离，首先需要在页面中引入jQuery库，然后注册`scroll`事件并使用`$(window).scrollTop()`方法获取滚动距离。以下是相应的代码示例： ```html <!DOCTYPE html> , initial-scale=1.0"> ...
获取页面高度，窗口高度，滚动条高度等参数值getPageSize,getPageScroll
12-12
在网页开发中，有时我们需要获取页面的某些特定尺寸和位置信息，例如页面高度、窗口高度以及滚动条的高度。这些信息对于实现动态布局、滚动事件处理或页面适配等任务至关重要。这里有两个JavaScript函数：`...
jquery scrollTop方法根据滚动像素显示隐藏顶部导航条
12-11
总结来说，`jQuery.scrollTop()` 方法在网页开发中扮演了重要的角色，它允许我们灵活地处理页面的滚动行为，特别是在创建响应式导航条和其他基于滚动事件的交互时。通过结合 CSS、HTML 和 JavaScript，我们可以创建...
html监听页面滚动高度,jquery如何获取元素的滚动高度
weixin_42499379的博客
06-03 1115
jquery怎么设置滚动条的位置jQuery 实现div在窗口滚动条到一定位置后显示并固搞了半天出不来 求助啊T T 要全部的实现代码书写css代码。* { margin: 0; padding: 0; list-style: none; }img { border: none; }body { font-family: Arial, Helvetica, sans-serif; }。书写并添加j...
JavaScript第 11 篇，JavaScript中的scrollTop（JavaScript中的scrollTop，JS滚动到顶部）
热门推荐
NorthCity Smile的博客（NcSmile，博主域名：https://ncmile.blog.youkuaiyun.com）
03-30 2万+
⭐scrollTop是JavaScript中一个非常有用且重要的方法，它用于获取或设置元素的垂直滚动条位置，实现各种滚动相关的功能，无论是回到顶部、滚动到指定位置还是监听滚动事件，都需要用到scrollTop，在本文中，我们将深入了解scrollTop的用法和实际应用，这是一张scrollTop的关系图，仅供参考
jquery的scrollTop方法获取值总为0的问题
whx_0408的专栏
05-12 6884
当html，body设置了高度时，获取$(window).scrollTop(),$(document).scrollTop()获取值为
jQuery之scrollLeft()、scrollTop()
06-17 1562
【代码】jQuery之scrollLeft()、scrollTop()
jQuery scrollTop( ) 方法
m0_57835615的博客
06-13 1009
通过jQuery的 scrollTop( ) 方法，我们可以设置或返回被选元素的垂直滚动条位置。 注意： （1）返回被选元素的垂直滚动条位置时， （2）
js 获取滚动条位置 scrollTop总是0
weixin_43964271的博客
06-06 2668
由于页面导航栏是在页面中而非顶部固定的，所以需要在页面滚动到遮挡住导航栏的时候，在固定位置显示导航栏，我看网上案例类似的有页面向下滚动到一定位置的时候显示一键置顶的按钮等，都是类似的需求。改为①e.target.scrollTop获取div滚动位置；②addEventListener第三个参数设置成true，事件捕获，就可以实时获取div的滚动位置了。结果一直输出的是0，而且并不是一直监听，只输出几次；定义有滚动条的dev区域是box。
js/jquery获取页面大小,滚动条位置,元素位置
zxphwz的专栏
08-20 498
jquery 获取浏览器显示区域的高度 ： $(window).height(); 获取浏览器显示区域的宽度 ：$(window).width(); 获取页面的文档高度 ：$(document).height(); 获取页面的文档宽度 ：$(document).width(); 获取滚动条到顶部的垂直高度 ：$(document).scrollTop(); 获取滚动条到左边
20-jQuery的scrollTop方法
weixin_44142718的博客
12-08 315
1、代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>20-jQuery的scrollTop方法</title> <style>
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值