获取页面可视区的高度·DOCTYPE的作用·将滚动条定位到具体的元素

1.获取页面可视区的高度

有两个获取页面可视区的高度，

document.documentElement.clientHeight

，

document.body.clientHeight

，这两个的区别是页面是否使用兼容模式，即是否使用

<!DOCTYPE>

。

document.documentElement是整个html文档的内容，而document.body只是整个body的内容。

当页面有

<!DOCTYPE>

时，

document.documentElement.clientHeight

指的是页面可视高度，而后者指的是页面中body中的内容高度，并不包括JS添加的部分。

当页面没有

<!DOCTYPE>

时，

document.documentElement.clientHeight

指的是页面的高度（页面可视的高度+页面被卷去的高度（

$('html,body').scrollTop()

）），后者指的是页面的可视区高度。

不管是加没加头声明都能正确的获取可视区高度的方法

javascript

var  noDOC =  document.body;

var  hasDOC = document.documentElment;

var  mode = (document.compatMode === "CSS1Compat");

var  seenHeight = mode ? hasDOC.height : noDOC.height;

2.DOCTYPE的作用

<!DOCTYE>

的作用是声明文档的解析类型为兼容模式，避免怪异模式。

document.compatMode：

BackCompat：怪异模式，浏览器使用自己的怪异模式解析渲染页面。

CSS1Compat：标准模式，浏览器使用W3C的标准解析渲染页面。

这个属性会被浏览器识别并使用，但是如果你的页面没有DOCTYPE的声明，那么compatMode默认就是BackCompat。

3.将滚动条定位到具体的位置

$("html,body").animate({scrollTop:$("").offset().top},1);