jQuer中 height scrollTop

jQuery(window).height()代表了当前可见区域的大小,而jQuery(document).height()则代表了整个文档的高度,可视具体情况使用.

注意当浏览器窗口大小改变时(如最大化或拉大窗口后) jQuery(window).height() 随之改变,但是jQuery(document).height()是不变的。

$(document).scrollTop() //获取垂直滚动的距离  即当前滚动的地方的窗口顶端到整个页面顶端的距离
$(document).scrollLeft() //这是获取水平滚动条的距离

要获取顶端 只需要获取到scrollTop()==0的时候  就是顶端了

要获取底端 只要获取scrollTop()>=$(document).height()-$(window).height()  就可以知道已经滚动到底端了
1 $(document).height()  //是获取整个页面的高度
2 $(window).height()  //是获取当前 也就是你浏览器所能看到的页面的那部分的高度  这个大小在你缩放浏览器窗口大小时 会改变 与document是不一样的  根据英文应该也能理解吧

自己做个实验就知道了 
1 $(document).scroll(function(){
2     $("#lb").text($(document).scrollTop());
3 })
4 <span id="lb" style="top:100px;left:100px;position:fixed;"></span><!--一个固定的span标记 滚动时方便查看-->
时间: 2024-10-11 11:40:27

jQuer中 height scrollTop的相关文章

关于js中的scrollTop

最近想写一个信息滚动的demo,但是一直没有实现,最后查找资料,看了网上的一些例子,之后才明白原因:没有清楚scrollTop的真正含义 html代码: <div class="info-area" id="area">              <ul id="list">                     <li><a href="">菲律宾渔民拖走黄岩岛附近多个中国浮

DOM元素中height, clientHeight,offsetHeight等,到底是什么?

<div  style="height:200px;padding:10px;border:1px solid green;"></div> 对于上面的div,它的border的height有多高?答案是200+10*2+1*2=222. 直接上结论:在style或css样式中的 height:200px  指的是内容可视区的高度,不含内边距,不含border,不含外边距,而不是div的高度. 以下结论在 firefox.chrome.IE10+.QQ浏览器中都

如何使CSS中height:100% 起作用

1.按照w3c中的width和height属性,可以明确%设定宽高是根据父元素的宽高来的: 2.Web浏览器在计算有效宽度时会考虑浏览器窗口的打开宽度.如果你不给宽度设定任何缺省值,那浏览器会自动将页面内容平铺填满整个横向宽度.即我们不设置宽,会自动填满整个横向宽度,因为页面并没有缺省的高度值,所以,当你让一个元素的高度设定为百分比高度时,无法根据获取父元素的高度,也就无法计算自己的高度. 解决方案: html,body{ height: 100%; margin: 0; padding: 0;

jquery中的scrollTop控制浏览器的滚动条

jQuery获取的相关方法 jquery 获取滚动条高度 获取浏览器显示区域的高度 : $(window).height(); 获取浏览器显示区域的宽度 : $(window).width(); 获取页面的文档高度 :$(document).height(); 获取页面的文档宽度 :$(document).width(); 获取滚动条到顶部的垂直高度 : $(document).scrollTop(); 获取滚动条到左边的垂直宽度 : $(document).scrollLeft(); 计算元素

demopu教你学习css,css中height,min-height,max-height的区别

min-height  样式用于设置元素的最小高度. max-height  样式用于设置元素的最大高度 Javascript object.style.maxHeight="20"; Jquery $().css('max-height',20); 更多学习  http://www.demopu.com/doc/css/max-height.html www.demopu.com / css / max-height

在Height标签中如何可以设置其中的值为浮点数

今天来为大家说一说在我最近做的一个项目中遇到的一个比较有意思的东西. 先说一下,这个项目的需求是要在前端显示界面提供信息整合分析的图表,这里我们选择了使用柱形图. 以一个镇子里面的每一个村子有多少人为例: 首先要先确定Y轴的数据的间隔是多少,我们在这里设置的为20px; 因为在前端浏览器Height标签获取相应数据的时候采用的是取整,但是这里在显示的时候是明显不能够用整数值的: 假如我们设置Y轴大概每一个20px的间距就是100个人口,那么如果是99个人的话实际的柱形图的高度应为99/100*2

Jquery中的 height(), innerHeight() outerHeight()区别

jQuery中的 height innerHeight outerHeight区别 标准浏览器下: height:高度 innerHeight:高度+补白 outerHeight:高度+补白+边框,参数为true时:高度+补白+边框+边距 html代码: <div class="width: 150px;height:20px;float: left;border: 2px solid red;margin: 10px;margin: 10px;padding: 10px;" i

对scrollTop的研究

本文主要从原生 JS以及jquery来说明scrollTop是如何实现的,以及一些技巧,以及在PC端和移动端使用的差异. 首先用代码表示下如何回到顶部的简单原理 1 <!doctype html> 2 <html lang="zh_EN"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>滚动条距离</title> 6 <script> 7 wi

scrollTop,scrollHeight,clientTop,clientHeight,offsetTop,offsetHeight实际意义 及 计算方式 附实例说明

一.滚动距离.高度 scrollTop scrollLeft scrollHeight scrollWidth 二.相对位置.距离 offsetTop offsetLeft offsetHeight offsetWidth 三.可视距离.宽高 clientTop clientLeft clientHeight clientWidth 四.坐标 event.clientX event.clientY event.pageX event.pageY event.offsetX event.offse