$("#id").scrollTop() 返回 null答案

【问题标题】：$("#id").scrollTop() returns null$("#id").scrollTop() 返回 null
【发布时间】：2014-10-28 05:03:33
【问题描述】：

我正在尝试使用 scrollTop() 方法在我的 html 页面中获取 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。你能看出问题出在哪里吗？

【问题讨论】：

标签： jquery html web scrolltop

【解决方案1】：

那些divs 没有滚动条（我假设），所以它们自然不能滚动。

如果您想找到需要滚动到的位置，使其位于顶部，请尝试：

$('#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>

【讨论】：

谢谢，这正是我所需要的。

【解决方案2】：

使用.position().top获取页面位置：

FIDDLE

【讨论】：

【解决方案3】：

尝试将整个东西包装在一个准备好文档的外壳中。您的 javascript 可能在 dom 完成加载之前正在运行。

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

【讨论】：

此解决方案返回 0。也许我错过了使用 scrollTop() 函数。感谢您的回答。