继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

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

慕娘5729972
关注TA
已关注
手记 240
粉丝 133
获赞 771

$(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不变

打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP