「JavaScript」获取视口高度的方法

取窗口滚动条滚动高度

function getScrollTop() {
  var scrollTop=0;
  if(document.documentElement&&document.documentElement.scrollTop){
  　　scrollTop=document.documentElement.scrollTop;
  } else if(document.body) {
  　　scrollTop=document.body.scrollTop;
  }
  return scrollTop;
}

取窗口可视范围的高度

function getClientHeight() {
  var clientHeight=0;
  if(document.body.clientHeight&&document.documentElement.clientHeight) {
  　　var clientHeight = (document.body.clientHeight<document.documentElement.clientHeight)?document.body.clientHeight:document.documentElement.clientHeight;
  } else {
 　　 var clientHeight = (document.body.clientHeight>document.documentElement.clientHeight)?document.body.clientHeight:document.documentElement.clientHeight;
  }
  return clientHeight;
}

取文档内容实际高度

function getScrollHeight() {
  return Math.max(document.body.scrollHeight,document.documentElement.scrollHeight);
}

在IE中：
document.body.clientWidth ==> BODY对象宽度
document.body.clientHeight ==> BODY对象高度
document.documentElement.clientWidth ==> 可见区域宽度
document.documentElement.clientHeight ==> 可见区域高度
document.documentElement.scrollTop =>窗口滚动条滚动高度
在FireFox中：
document.body.clientWidth ==> BODY对象宽度
document.body.clientHeight ==> BODY对象高度
document.documentElement.clientWidth ==> 可见区域宽度
document.documentElement.clientHeight ==> 可见区域高度
document.documentElement.scrollTop =>窗口滚动条滚动高度

在chrome中：
document.body.clientWidth ==> BODY对象宽度
document.body.clientHeight ==> BODY对象高度
document.documentElement.clientWidth ==> 可见区域宽度
document.documentElement.clientHeight ==> 可见区域高度
document.body.scrollTop =>窗口滚动条滚动高度

在Opera中：
document.body.clientWidth ==> 可见区域宽度
document.body.clientHeight ==> 可见区域高度
document.documentElement.clientWidth ==> 页面对象宽度（即BODY对象宽度加上Margin宽）
document.documentElement.clientHeight ==> 页面对象高度（即BODY对象高度加上Margin高

滚动到顶部 window.scrollTo(0,0)
滚动到尾部 window.scrollTo(0,document.body.clientHeight)

jQuery方法

获取浏览器显示区域的高度 ：$(window).height();
获取浏览器显示区域的宽度 ：$(window).width();
获取页面的文档高度 ：$(document).height();
获取页面的文档宽度 ：$(document).width();
获取滚动条到顶部的垂直高度：$(document).scrollTop();
获取滚动条到左边的垂直宽度 ：$(document).scrollLeft();

计算元素位置和偏移量

offset方法是一个很有用的方法，它返回包装集中第一个元素的偏移信息。默认情况下是相对body的偏移信息。结果包含 top和left两个属性。
offset(options, results)

options.relativeTo　　指定相对计算偏移位置的祖先元素。这个元素应该是relative或absolute定位。省略则相对body。
options.scroll　　是否把滚动条计算在内，默认TRUE
options.padding　　是否把padding计算在内，默认false
options.margin　　是否把margin计算在内，默认true
options.border　　是否把边框计算在内，默认true

http://www.cnblogs.com/hoojo/archive/2012/02/16/2354663.html

alert($(window).height());   //浏览器当前窗口可视区域高度
alert($(document).height());   //浏览器当前窗口文档的高度
alert($(document.body).height());   //浏览器当前窗口文档body的高度
alert($(document.body).outerHeight(true));  //浏览器当前窗口文档body的总高度 包括border padding margin
alert($(window).width());   //浏览器当前窗口可视区域宽度
alert($(document).width());  //浏览器当前窗口文档对象宽度
alert($(document.body).width());  //浏览器当前窗口文档body的高度
alert($(document.body).outerWidth(true));  //浏览器当前窗口文档body的总宽度 包括border padding margin

// 滚动条
document.body.scrollTop;
$(document).scrollTop();

转载自博客园