滾動一個 <div> 特定內容

Question

我正在創建一個拆分頁面，左側有一個菜單，右側是主要內容。 當我單擊菜單項時，我想將主要內容滾動到該項目。

我找到了帶偏移量參數的JavaScript scrollTo() 。

有什么方法可以確定特定<p>或<div>其他元素的偏移量嗎？ 還是有另一種方式可以滾動到某個元素而不知道其偏移量？

編輯

感謝您的答復。 似乎每個人都給出了類似的答案。 但是，我遇到了一個問題。 似乎offset().top （或position().top ）根據當前滾動位置返回不同的值。

如果我滾動到頂部並選擇“第4部分”，它將按預期工作。 但是，一旦我滾動，它就會停止正常工作。 誰能看到發生了什么事。

Answer 1

您可以使用$('p').offset().top獲取元素的垂直偏移量。 您可以使用以下方法將其與scrollTop()結合使用：

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

Answer 2

您需要使用position（）而不是offset（）。 如果你知道那個的ID

您可以輕松找到該段落標簽的位置

jQuery：position（）和offset（）之間的區別

Answer 3

有jquery方法offset和position stat可以幫助您。

還有一個很好的scrollTo插件，可以接受元素等等。

Answer 4

如果我沒有誤會的話，您只需要動畫滾動到一個特定的元素，就和我在投資組合中所做的類似。

假設左側菜單是固定的，則只需將頁面滾動到要滾動到的元素：

$("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）