頁面位置 top、postop、scrolltop、offsetTop、scrollHeight、offsetHeight、clientHeight，postopscrollheight

頁面位置 top、postop、scrolltop、offsetTop、scrollHeight、offsetHeight、clientHeight，postopscrollheight

1.top

此屬性僅僅在對象的定位(position)屬性被設定時可用。否則，此屬性設定會被忽略。

代碼如下:
<div style=" position:absolute; width:100px; height:100px;">
<p style=" position:absolute; top:-5px;">測試top</p>
</div>

上面是一個段落P包含在一個DIV內，可以看到P的top設定為-5px後，它的上邊距超過了容器DIV的上邊距，超過的這段距離就是設定的5px。

需要注意的是，DIV和P這一對包含元素，都需要設定position為absolute才能得到想要的結果，假如父元素不設定，則子項目的參照將是更上層定義過position的元素，直到整個文檔；

2.posTop

posTop的數值其實和top是一樣的，但區別在於，top固定了元素單位為px，而posTop只是一個數值,一般使用posTop來進行運算。

3.scrollTop

代碼如下:
<div id="container" style=" width:100px; height:100px; overflow:auto;">
<p style="" mce_style="">
這裡是文本
</p>
</div>
<script type="text/javascript"><!--
container.scrollTop = 12;
// --></script>

這一段文本在這個100*100的DIV內無法完全顯示，所以設定了overflow為auto，它會出現一個上下方向的滑動框，假如沒有設定 id.scrollTop屬性的話，預設情況下滑塊位置在頂端。而設定了scrollTop值為12後，滑塊的位置改變了，預設顯示是卷過了12個象素的文本。如果設定overflow為hidden，則將會無法顯示頂部12個象素的文本。

注意設定方式是id.scrollTop，而不是id.style.scrollTop。

4.offsetTop

如果元素 A 是 HTML 的 body 元素，其 display 屬性計算值是 none，或者不具有 CSS 布局盒子，則返回 0，並停止本演算法。

如果元素 A 的 offsetParent 是 null 或者是 HTML 的 body 元素，以 CSS 像素為單位返回元素 A 上邊框距畫布原點的垂直距離，並停止本演算法。

以 CSS 像素為單位返回元素 A 上邊框距其 offsetParent 上邊框的距離。
 
5. scrollHeight 與 offsetHeight與clientHeight

對於document.body

clientHeight
大家對 clientHeight 都沒有什麼異議，都認為是內容可視地區的高度，也就是說頁面瀏覽器中可以看到內容的這個地區的高度，一般是最後一個工具條以下到狀態列以上的這個地區，與頁面內容無關。

offsetHeight
IE、Opera 認為 offsetHeight = clientHeight + 捲軸 + 邊框。
NS、FF 認為 offsetHeight 是網頁內容實際高度，可以小於 clientHeight。

scrollHeight
IE、Opera 認為 scrollHeight 是網頁內容實際高度，可以小於 clientHeight。
NS、FF 認為 scrollHeight 是網頁內容高度，不過最小值是 clientHeight

對某個HTML控制項

offsetHeight是自身元素的高度，scrollHeight是 自身元素的高度+隱藏元素的高度。

代碼如下:
<div id="container" style=" width:100px; height:100px; overflow:auto;">
<p style=" height:250px; ">
別再做情人 做只貓 做只狗 不做情人 做只寵物至少可愛迷人 和你相交不淺無謂明日會被你憎</p>
</div>
<script type="text/javascript"><!--
alert(container.offsetHeight);
alert(container.scrollHeight);
// --></script>

將依次輸出100，250。因為已經指定了元素的height為100px，所以offsetHeight始終為100px；內部元素為250px，而容器元素只有100px，那麼還有150px的內容它無法顯示出來，但它卻是實際存在的，所以scrollHeight值為100+150=250。

scrollheight，scrolltop，offsetheight具體是什，舉例說明，別拿文本語言解釋，不懂

scrollHeight，scrollTop，offsetHeight
從來沒有切定學過js的我，好多知識點都落下了！這幾天公司要做一個抽獎模組，要求將中獎使用者的一些資訊來復原動顯示出來。滾動效果網上還是蠻多的，自己以前也做過類似的效果，但這次做起來還這不是以前那麼順利，不是滾兩下停了就是有跳躍的感覺。還是的自己好好‘研究’一下：scrollHeight，scrollTop，offsetHeight這三個鳥東西
先發一個‘道具’放這，為下面的解說做點準備：
第一條
第二條
第三條
第四條
<script type="text/javascript">// <![CDATA[
var test = document.getElementById('test');
var inner1 = document.getElementById('inner1');
var inner2 = document.getElementById('inner2');
inner2.innerHTML = inner1.innerHTML;

//alert(test.offsetHeight);
//alert(test.scrollHeight);
//alert(test.scrollTop);

//alert(inner1.offsetHeight);
//alert(inner1.scrollHeight);
//alert(inner1.scrollTop);

//alert(inner2.offsetHeight);
//alert(inner.scrollHeight);
//alert(inner.scrollTop);

setInterval(add, 70);
function add(){
if( inner1.offsetHeight-test.scrollTop<=0 ){
//alert(test.scrollTop);
test.scrollTop -= inner1.offsetHeight;
//alert(test.scrollTop);
}else{
test.scrollTop++;
}
}
// ]]></script>
scrollHeight： 看起來有點像捲軸的高度，其實不然，雖然他確實更捲軸有關係。他是指一個元素在不加任何：height，overflow 這些限制時的高度。比如上面：id=”test”的div，他的scrollHeight是280px，為什麼是這個數！？這個可以計算出來的：inner1的高度=35*4px（註：每一行line-height為35px，總共4行，切已經去掉了p標籤的內外邊框margin padding 的高度），然後又因為js裡面有這一句：inner2.innerHTML = inner1.innerHTML;將innner1裡面的html標記複製給了innner2，所以inner2現在的高度也是：35*4px，所以也就有test的高度為 280px=inner1+inner2;
offsetHeight： 這個東西......餘下全文>>

 
demo1offsetTop-demoscrollTop>=0)什意思

offsetTop 當前對象到其上級層頂部的距離. scrollTop對象的最頂部到對象在當前視窗顯示的範圍內的頂邊的距離．