jquery获取窗口高度的方法及判断scroll滚动到底部

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jquery获取窗口高度的方法及判断scroll滚动到底部相关的知识,希望对你有一定的参考价值。

$(window).height()     获取的是当前可视窗口的高度,也就是用户能看到的窗口的高度,是不变的(在窗口大小不变的前提下)
$(document).height()  获取的是窗口内文档的高度,这个高度随着文档内容的高度改变而改变


当窗口滚动条滚到最低端时,$(document).height() == $(window).height() + $(window).scrollTop()。
当窗口内文档高度不足浏览器窗口高度时,$(document).height()返回的是$(window).height()。

$("body").height()   如果body没有border、margin的话,$("body").height()==$(document).height(),但是还是不建议使用这种方式去获取文档内容高度

PS:如果你发现$(window).height()值有问题,返回的不是浏览器窗口的高度,那么看看是不是网页没有加上<!DOCTYPE>声明


滚动某个div中内容的情形如下

代码:

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $(".btn1").click(function(){
    $("div").scrollTop(100);
  });
  $(".btn2").click(function(){
    alert($("div").scrollTop()+" px");
  });
});
</script>
</head>
<body>
<div style="border:1px solid black;width:200px;height:200px;overflow:auto">
This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.
</div>
<button class="btn1">把 scroll top offset 设置为 100px</button>
<br />
<button class="btn2">获得 scroll top offset</button>
</body>
</html>

当滚动条滚动到底部时,此时$("div").scrollTop() = 394px   $("div").height()为div的高度200px不变

本文出自 “不编程,无生活” 博客,请务必保留此出处http://51coding.blog.51cto.com/6079322/1754841

以上是关于jquery获取窗口高度的方法及判断scroll滚动到底部的主要内容,如果未能解决你的问题,请参考以下文章

jquery判断页面滚动条(scroll)是上滚还是下滚,且是否滚动到头部或者底部

jQuery检测滚动条(scroll)是否到达底部

获取页面scroll高度

jQuery判断滚动条是上滚还是下滚,且是否到达底部或顶部

jquery判断滚动条到底部

jquery效果:DIV随浏览器滚动条上下移动