1、.position()和.offset()
jquery的.position()獲取相對於最近的position為relative或absolute的父元素的偏移，返回.position().left和.position().top，不算上自己的margin-left；
jquery的.offset()獲取相對於視口左上角的偏移，返回.offset().left和.offset().top, 算上自己的margin-left,，還可以設置.offset({left:,top:});這個很有用，比如編寫日期控件時，append到body上，然后就可以根據input的.offset()和高度設置日期控件的.offset()，最終這些值自動會被換算為position為relative（相對於body）的top和left。
jquery的.offset()與js的obj.offsetLeft和.obj.offsetTop一樣，只是這個不能賦值。
2、.outerHeight()、.innerHeight()和.height()
jquery的.outerHeight()=border+padding+height，等同於js的.offsetHeight（.offsetWidth同理）
.outerHeight(true)=margin+border+padding+height
.innerHeight()=padding+height
.height()設置和獲取高度
3、.scrollTop和.scrollHeight
.scrollTop:已經滾動過的高度;
.scrollHeight:整個滾動的高度，從開始到滾動結束滾動過的高度，包括滾動元素自身的高度。
用圖來解釋：如下圖，contentContainer為父元素，content為它的子元素，由於它的高度設置得比父元素高度高，所以父元素出現了滾動條。
假設現在滑動條已划過了一段距離，
則contentContainer的scrollTop為a，scrollHeight為b。
4、監聽整個網頁的滾動事件：
測試ie11、chorme、firefox，發現body上不支持監聽整個網頁的滾動事件scroll,window上都支持：window.onscroll=function(){};
5、獲取/設置網頁已滾動的高度：
| chrome | document.documentElement.scrollTop無效為0， document.body.scrollTop有效與$('body').scrollTop()+','+$(document).scrollTop()等值 |
| safari與chrome表現相同 | |
| ie11（包括其模擬的IE10-7） | document.documentElement.scrollTop有效與$(document).scrollTop()等值， document.body.scrollTop無效為0，$('body').scrollTop()無效為0 |
| firefox | document.documentElement.scrollTop有效與$(document).scrollTop()等值， document.body.scrollTop無效為0，$('body').scrollTop()無效為0 |
所以獲取網頁已滾動的高度時：Math.max(document.documentElement.scrollTop,document.body.scrollTop)或$(document).scrollTop()
jquery和js的scrollTop都可以賦值。
所以如果要設置‘返回頂部’的效果應該：
$('#totop').click(function(){
document.body.scrollTop?document.body.scrollTop=0:document.documentElement.scrollTop=0;
//或$(document).scrollTop(0);
})
另外測試同一個頁面，用鼠標滾輪把頁面滾動到底，ie11和chrome都只觸發了兩次，大概是scrollTop從166到230,而firefox則觸發了15次，看來ie11和chrome對觸發滾動事件做了優化。可以手動添加判斷兩次滾動間隔超過多少px才允許運行onscroll函數:
var stop=Math.max(document.documentElement.scrollTop,document.body.scrollTop); window.onscroll=function(){ if(Math.max(document.documentElement.scrollTop,document.body.scrollTop)-stop>100) {//do something} }
6、獲取body視口高度：
有<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">時：
| chrome | document.documentElement.clientHeight有效，window.innerHeigh有效， document.body.clientHeight無效與$('body').height()等值 |
| ie11（包括其模擬的IE10-9） | document.documentElement.clientHeight有效，window.innerHeigh有效， document.body.clientHeight無效與$('body').height()等值, |
| 用ie11模擬ie8、ie7 | window.innerHeight為undefined，其他相同 |
| firefox | document.documentElement.clientHeight有效，window.innerHeigh有效， document.body.clientHeight無效與$('body').height()等值 |
無<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">時：
chrome：document.documentElement.clientHeight無效與$('body').outerHeight(true)等值，window.innerHeigh有效，document.body.clientHeight有效，即使是有<!DOCTYPE>也是如此。
ie11:document.documentElement.clientHeight有效,document.body.clientHeight有效(ie7,8,9:無效與$('body').outerHeight(true)等值),window.innerHeigh有效,（用ie11模擬ie8、ie7時，window.innerHeight為undefined），即使是有<!DOCTYPE>也是如此。
所以在保證有完整<!DOCTYPE...聲明的前提下，獲取body的視口高度為：document.documentElement.clientHeight;
7、判斷div的滾動條滾到底部
只要判斷這個div已滾動的距離scrollTop+自己本身的高度offsetHeight>這個div的scrollHeight就表示滾動到底了。
如：一個id='contentContainer'的div里面包含一個高度查過自己 id='content'的子div。
則只要
document.getElementById('contentContainer').onscroll=function(){
if(this.scrollTop+this.offsetHeight>=this.scrollHeight){
$(this).append('bottom');
//不要用==因為很多瀏覽器並不是每滾動1px就觸發scroll事件的
}
}
8、判斷body的滾動條滾到底部:
獲取頁面的scrollHeight：document.documentElement.scrollHeight在各瀏覽器中表現一致。
監聽頁面滾動條滾到底部：
window.onscroll=function(){ var scrolltop=Math.max(document.documentElement.scrollTop,document.body.scrollTop); if(scrolltop+document.documentElement.clientHeight>=document.documentElement.scrollHeight) alert( 'nowbottom' ); };