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);