下面的示範中，外層元素的高度值是200px,內層元素的高度值是300px。很明顯，“外層元素中的內容”高過了“外層元素”本身.當向下拖動捲軸時，有部分內容會隱沒在“外層元素的上邊界”之外，scrollTop就等於這部分“不可見的內容”的高度。
示範：（拖動捲軸，可以看到scrollTop值的變化）
這些文字顯示在內層元素中。
scrollTop值是：
<div id="外層元素"> <div id="內層元素"> 這些文字顯示在內層元素中。 </div> </div>
[Ctrl+A 全選 注:如需引入外部Js需重新整理才能執行]
解釋：
內層元素的高度值300px > 外層元素的高度值200px,因此“外層元素的內容”(也就是“內層元素”)無法完全顯示，而外層元素把overflow設定為auto，因此外層元素的右側會出現一個上下方向的滑動條
初始狀態下，“內層元素的上邊界”和“外層元素的上邊界”重合，沒有任何內容超過“外層元素的上邊界”，此時scrollTop屬性的值為0。
當向下拖動捲軸時，超過“外層元素的上邊界”的內容會逐漸增多，scrollTop值就等於這些超出的部分。
當拖動捲軸到最底部時，“內層元素的下邊界”和“外層元素的下邊界”重合，超過“外層元素的上邊界”的內容的高度=300px-200px=100px，這也就是此時的scrollTop值。
通過js代碼來讀取，寫入scrollTop的值
注意：scrollTop的使用方式是element.scrollTop，而不是element.style.scrollTop
通過js代碼來讀取scrollTop的值
上面的示範執行個體中，其實已經用到了scrollTop的讀取操作。具體來說就是，在拖動捲軸的過程中，會讀取此時的scrollTop的值，並在下方文字中顯示出來。
上面的示範執行個體的完整原碼：
<div id="外層元素"> <div id="內層元素"> 這些文字顯示在內層元素中。 </div> </div> <p>scrollTop值是：<span id="示範元素scrollTop的值"></span></p> <script type="text/javascript"> var 外層元素_div = document.getElementById("外層元素"); 外層元素_div.onscroll=讀取scrollTop的值並顯示出來; ////註冊onscroll事件處理函數。當拖動捲軸時，會產生onscroll事件 var span_示範元素scrollTop的值 = document.getElementById("示範元素scrollTop的值"); //onscroll事件的處理函數 function 讀取scrollTop的值並顯示出來() {span_示範元素scrollTop的值.innerHTML=外層元素_div.scrollTop; //讀取"外層元素"此時的scrollTop的值並顯示出來 } 讀取scrollTop的值並顯示出來(); //頁面載入完成後，執行一次此函數。顯示最初的scrollTop值，此時的值為0 </script>
[Ctrl+A 全選 注:如需引入外部Js需重新整理才能執行]
解釋：
當拖動“外層元素的捲軸”時，會產生onscroll事件。為這個事件註冊一個名為讀取scrollTop的值並顯示出來的處理函數
在讀取scrollTop的值並顯示出來這個事件處理函數中，通過外層元素_div.scrollTop得到“外層元素”當時的scrollTop的值，並顯示在頁面上。
通過js代碼來設定scrollTop的值
對上面的示範例子作一些修改。添加功能：通過js語句來設定scrollTop的值
樣本：
這些文字顯示在內層元素中。
scrollTop值是：
把scrollTop設為50把scrollTop設為500
輸入scrollTop的值:確定
上面的示範執行個體的完整原碼：
<div id="外層元素A"> <div id="內層元素A"> 這些文字顯示在內層元素中。 </div> </div> <p>scrollTop值是：<span id="外層元素A的scrollTop的值"></span></p> <p><button type="button" onclick="div_外層元素A.scrollTop=50;">把scrollTop設為50</button> <button type="button" onclick="div_外層元素A.scrollTop=500;">把scrollTop設為500</button> </p> <p>輸入scrollTop的值:<input type="text" id="輸入scrollTop的值" value="" /> <button type="button" onclick="設定scrollTop的值()" name="設定scrollTop的值">確定</button> </p> <script type="text/javascript"> var div_外層元素A = document.getElementById("外層元素A"); div_外層元素A.onscroll=讀取scrollTop的值並顯示出來; //註冊onscroll事件處理函數。當拖動捲軸時，會產生onscroll事件 var span_外層元素A的scrollTop的值 = document.getElementById("外層元素A的scrollTop的值"); //onscroll事件的處理函數 function 讀取scrollTop的值並顯示出來() {span_外層元素A的scrollTop的值.innerHTML=div_外層元素A.scrollTop; //讀取"外層元素"此時的scrollTop的值並顯示出來 } 讀取scrollTop的值並顯示出來(); //頁面載入完成後，執行一次此函數。顯示最初的scrollTop值，此時的值為0 div_外層元素A.scrollTop = 10; //通過js語句來設定scrollTop的值,本條語句會觸發onscroll事件，使得"讀取scrollTop的值並顯示出來"函數執行一次。 function 設定scrollTop的值() { if("" != document.getElementById("輸入scrollTop的值").value) div_外層元素A.scrollTop = document.getElementById("輸入scrollTop的值").value; else alert("請輸入一個數值"); }</script>
[Ctrl+A 全選 注:如需引入外部Js需重新整理才能執行]
解釋：
形如div_外層元素A.scrollTop = 12345;的指派陳述式會觸發onscroll事件，使得讀取scrollTop的值並顯示出來函數執行一次
上一個例子中已經提到：當拖動捲軸到最底部時，scrollTop=300px-200px=100px，這是scrollTop能夠取的最大值。當用更大的值賦給scrollTop時，scrollTop會自動把它轉變為100。例如上面的“把scrollTop設為500”按鈕，scrollTop會把500轉變為100。
得到body元素的scrollTop
body元素的scrollTop是超出“瀏覽器視窗上邊界”的內容的高度
當html文檔頭部包含有“文件類型聲明”時，需要用document.documentElement.scrollTop獲得正確的值，而document.body.scrollTop的值為0
複製代碼 代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script type="text/javascript">
alert("document.documentElement.scrollTop:"+document.documentElement.scrollTop //"正確的值"
+"document.body.scrollTop:"+document.body.scrollTop //"值為0"
);
</script>
當html文檔頭部不包含任何“文件類型聲明”時，需要用document.body.scrollTop獲得正確的值，而document.documentElement.scrollTop的值為0
下面定義的get_scrollTop_of_body()方法可以處理這種差異
複製代碼 代碼如下:
function get_scrollTop_of_body(){
var scrollTop;
if(typeof window.pageYOffset != 'undefined'){
scrollTop = window.pageYOffset;
}
else
if(typeof document.compatMode != 'undefined' &&
document.compatMode != 'BackCompat'){
scrollTop = document.documentElement.scrollTop;
}
else
if(typeof document.body != 'undefined'){
scrollTop = document.body.scrollTop;
}
return scrollTop;
}
