使用scrollTop的奇怪行為

Question

我有一個奇怪的行為，使用scrollTop JQuery函數。 我有一個div，其中包含復雜的文本，分為以下不同部分：

<div id="wrapper" ... >
    <div id="section1">
        <h1>Section 1</h1>
        Lorem ipsum dolor sit amet, consectetuer... 
        ...
    </div>
    <div id="section2">
        <h1>Section 2</h1>
        Lorem ipsum dolor sit amet, consectetuer... 
        ...
    </div>
    <div id="section3">
        <h1>Section 3</h1>
        Lorem ipsum dolor sit amet, consectetuer... 
        ...
    </div>
    ...

第二個DIV包含一個簡單的部分列表，當用戶單擊每個部分時，我希望包裝器滾動到右側部分：

<li>
   <a href="#" onclick="customScrollTo('section1')">section1</a>
</li>
<li>
   <a href="#" onclick="customScrollTo('section2')">section2</a>
...

這是簡單的JS函數：

function customScrollTo (section) {

     $('#wrapper').animate({
         scrollTop: $("#wrapper div[id='" + section + "']").offset().top
     }, 200);
};

現在，如果您嘗試在此JSfiddle中對其進行測試： http : //jsfiddle.net/Ws5F9/4/

您會看到兩個奇怪的行為：

1. 如果您單擊“第1部分”而不是“第2部分”而不是“第3部分”，則第3部分無效！
2. 如果您在同一部分鏈接上單擊兩次，則第二次在頁面頂部滾動

Answer 1

customScrollTo方法有兩個問題。

首先，您使用.offset（）而不是.position（） 。 這將返回相對於文檔而不是#wrapper div的位置。 這在這里幾乎沒有引起注意，因為div無論如何都靠近文檔的頂部，但是在將其進一步移至頁面下方時會遇到麻煩。

其次，當您調用position時，它將考慮當前滾動位置返回元素的位置 ，因此，如果您已經滾動到文檔的頂部，它將按預期工作，但是任何進一步的滾動都會造成麻煩，由於文檔已被移動。 您還需要考慮當前滾動位置，方法是將其添加到最終滾動值中，這樣它就不會丟失。

這是解決兩個問題的示例：

function customScrollTo (section) {

     $('#wrapper').animate({
         scrollTop: $("#wrapper div[id='" + section + "']").position().top + $("#wrapper").scrollTop()
     }, 200);
 };

Answer 2

用這個：

function customScrollTo (sectionId) {
    var $wrapper = $('#wrapper'),
        $section = $('#' + sectionId);
     $wrapper.animate({
         scrollTop: $wrapper.scrollTop() + $section.position().top
     }, 200);
 }

.offset()函數獲取相對於文檔的坐標，而.position()函數獲取相對於父文檔的坐標。 但是.position().top值隨元素滾動而變化。 添加父級的.scrollTop()值可以.scrollTop()進行調整。

jsfiddle

Answer 3

試試這個，我也修改了您的標記。 看到這個演示

$('#index ul').on('click', 'a', function(e) {
 var section = $(this).prop('href');
 section = section.split('#')[1];
 var top = $("#" + section)[0].offsetTop;

 $('#wrapper').stop().animate({
     scrollTop: top
 }, 200);
 return false;
 });