获取页面可视区的高度·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);