$（「＃id」）。scrollTop（）返回null

Question

我想要在我的html頁面中使用scrollTop（）方法來獲取coulpe的位置，以便將它與用戶的位置進行比較，但它只返回null。下面是代碼：

<div id="div1" class="transition"> 
    <img src="bg1.jpg"/> 
</div> 

<div id="div2" class="transition"> 
    <img src="bg2.jpg"/> 
</div> 

和JavaScript：

var t1 = $('#div1').scrollTop(); 
var t2 = $('#div2').scrollTop(); 

console.log(t1 + " " + t2); 

和它打印t1和t2 = NULL。 你能看到問題出在哪裏嗎？

Answer 1

那些div都不具備的滾動條（我假設），於是他們自然就不能滾動。

如果你想找到你需要滾動，使它們在頂部位置，請嘗試：

$('#id').offset().top 

(jQuery docs)

這裏的工作演示：

---

var txt = $('#div1').offset().top + ' ' + $('#div2').offset().top; 
 

 
document.getElementById('output').appendChild(document.createTextNode(txt));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

 
<div id='div1'> 
 
    This is some stuff 
 
</div> 
 

 
<div id='div2'> 
 
    More stuff 
 
</div> 
 

 
<div id='output'></div>

Answer 2

使用.position().top得到的位置在頁面上：

FIDDLE

Answer 3

嘗試將整個東西包裝在文檔準備好的機箱中。您的JavaScript可能在dom完成加載之前運行。

$(document).ready(function(){ 
    var t1 = $('#div1').scrollTop(); 
    var t2 = $('#div2').scrollTop(); 
    console.log(t1 + " " + t2); 
});