加载时，跳转到 div 内的锚点答案

【问题标题】：On load, jump to anchor within a div加载时，跳转到 div 内的锚点
【发布时间】：2009-11-10 15:35:09
【问题描述】：

假设我有以下页面：

<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），以便在页面加载时，仅在 div#foo 内（而不是整个页面）跳转到#bar？我不需要花哨的动画或滚动，我只希望 #bar 在页面加载时位于 div 的顶部。

【问题讨论】：

标签： javascript jquery html xhtml

【解决方案1】：

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

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

编辑

附注：如果您想在 foo 和 bar 滚动后在 bar 之间放置一些空格，请确保在 bar 上设置 padding-top 而不是 margin-top。

EDIT DOM 解决方案（无论元素是否已定位都有效，请参阅@cobbals 对 jQuery 等价物的回答）：

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

【讨论】：

如果包含的 div 与页面顶部不对齐，则不起作用
div不对齐页面顶部是什么意思？
如果在 div #foo 之前放置了一些文本，我会滚动到错误的位置
所有被读取和设置的值都是相对于作为父元素的 foo 定义的（scrollTop() 和 position().top），所以 foo 之外的任何东西都不应该有影响。
那么可能是 safari 中的一个错误

【解决方案2】：

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

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

【讨论】：

你确定吗？在您的页面中测试它。当 bar 之前有非块元素时，jQuery 解决方案遇到了同样的问题，因为 $('#bar').offset().top 返回的值与 document.getElementById('bar').offsetTop 不同。
它们确实返回不同的值，但 $('#foo').scrollTop() + $("#bar").offset().top 与 document.getElementById('bar').offsetTop 相同（不完全确定原因，但它似乎有效）
您的答案与我原来的答案相反。只有当bar 是foo 中的第一个block 元素时，它才能按预期运行。在您的测试中将block 元素（如<p>）放在bar 之前，然后尝试您的答案以了解我的意思。
似乎无法重现它，如果我替换为<p>content...</p>，对我来说仍然可以正常工作（firefox 和 safari）。 jsbin.com/ofaqa
对。所以我找出了导致所有混乱的原因，请查看我的答案的最终编辑。

【解决方案3】：

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

【讨论】：

不错。由于 #bar 是一个 id 并且您在技术上不需要担心重复，因此内部上下文选择器是不必要的。很高兴看到有人朝那个方向思考。
$('#bar').scrollTop() 会给你 scrollTop 属性栏，它是 0，什么都不做。
瑞恩，你已经完蛋了。非常感谢您指出我明显的疏忽，因为这是一个极其复杂的问题/解决方案。
哈。肯定的事。不过请检查其他解决方案和评论线程，因为当foo 在bar 之前包含非块元素时似乎会出现意外结果。