Question

我试图使用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。你能看出问题出在哪里吗？

Answer 1

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

FIDDLE

Answer 2

那些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 3

尝试将整个文件包装在文档就绪的机箱中。在dom完成加载之前，您的javascript可能正在运行。

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

$（“＃id”）。scrollTop（）返回null

3 个答案: