javascript - 滚动一个
具体内容

Question

我正在创建一个拆分页面，左侧是菜单，右侧是主要内容。当我单击一个菜单项时，我想将主要内容滚动到该项目。

我找到了 JavaScript scrollTo()，它接受偏移参数。

有没有办法确定 a 中特定<p>或其他元素的偏移量<div>？或者也许还有另一种方法可以在不知道其偏移量的情况下滚动到元素？

编辑

感谢您的回复。看来大家都给出了类似的答案。但是，我遇到了这个问题。似乎offset().top（或position().top）根据当前滚动位置返回不同的值。

如果我滚动到顶部并选择第 4 节，它会按预期工作。但是一旦我滚动，它就会停止正常工作。任何人都可以看到发生了什么。

score 1 · Accepted Answer

您可以使用获取元素的垂直偏移量$('p').offset().top。您可以将它与scrollTop()使用它结合起来：

$('div').scrollTop($('p').offset().top);

score 1 · Accepted Answer

您需要使用 position() 而不是 offset()。如果你知道那个 id

您可以轻松找到该段落标签的位置

score 1 · Accepted Answer

有 jquery 方法offset和position stat 可以提供帮助。

还有一个很好的scrollTo插件，它接受元素等等。

score 1 · Accepted Answer

如果我没有误解，您只需要动画滚动到特定元素，这与我在投资组合中所做的类似。

假设左侧的菜单是固定的，那么只需将页面滚动到您要滚动到的元素：

$("html, body").animate({
   scrollTop: $('#element').offset().top 
});

如果您需要将特定元素移动到另一个元素上，则：

$("#element1").animate({
   top: $('#element2').offset().top 
});

score 1 · Accepted Answer

当您可以使用 HTML 原生属性时，为什么要努力尝试呢？

叫我老派，但我喜欢保持简单。

在您的菜单中：

采用：

<ul>
    <li>
        <a href="#Paragraph1">Paragraph 1</a>
    </li>
</ul>

代替

<ul>
    <li>Paragraph 1</li>
</ul>

这将使您的部分跳转到等于 Paragraph1 的 # (id)

javascript - 滚动一个具体内容