Question

假设我有以下页面：

<html>
<body>
<div id='foo' style='scroll:auto;height:400px'>
      // content, content, content...
      <div id='bar'></div>
      // content, content, content...
</div>
</body>
</html>

我可以使用什么jQuery（或vanilla Javascript），以便在页面加载时，它只跳转到#bar 只能在div＃foo （而不是整个页面）中？我不需要花哨的动画或滚动，我只想让#bar在页面加载时位于div的顶部。

Answer 1

jQuery解决方案（假设所有元素都以某种方式定位）

$('#foo').scrollTop($('#bar').position().top);

修改

附注：如果您希望在padding-top和bar之间放置一些空格，请务必在margin-top而不是foo设置bar

编辑 DOM解决方案（无论元素是否已定位，请参阅@cobbals回答jQuery等效项）：

document.getElementById('foo').scrollTop += document.getElementById('bar').offsetTop - document.getElementById('foo').offsetTop

Answer 2

$(document).ready(function() {
   $("#foo").scrollTop($("#foo #bar").position().top);
})

Answer 3

漫长而笨拙，可能有一种方法可以缩短它，但每次都会到达正确的位置。

$("#foo").scrollTop($("#foo").scrollTop() +
                    $("#bar").offset().top -
                    $("#foo").offset().top);

在加载时，跳转到div中的锚点

3 个答案: