将<div>滚动到特定内容</div>

Question

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

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

有没有办法确定<p>中特定<div>或其他元素的偏移量？或许还有另一种方法可以滚动到一个元素而不知道它的偏移量？

修改

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

我的jsFiddle在这里：http://jsfiddle.net/gBTW9/4/embedded/result/

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

Answer 1

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

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

Answer 2

您需要使用position（）而不是offset（）。如果您知道

的ID，则可以轻松找到该段落标记的位置

jQuery: Difference between position() and offset()

Answer 3

有jquery方法offset和position stat可以帮助那里。

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

Answer 4

如果我没有误解你只需要一个动画滚动到一个特定元素，类似于我在my portfolio上所做的事情。

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

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

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

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

Answer 5

为什么要尝试使用HTML本机属性？

打电话给我老学校，但我想保持简单。

菜单中的

：

使用：

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

而不是

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

这将使您的部分跳转到等于Paragraph1的＃（id）