使用 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()。这是返回相对于文档而不是#wrapperdiv 的位置。这在这里几乎不会引起注意，因为无论如何 div 都靠近文档的顶部，但是当您将它移到页面下方时会遇到麻烦。

其次，当您调用 position 时，它将考虑当前滚动位置返回元素的位置，因此如果您已经滚动到文档顶部，它将按预期工作，但任何进一步滚动都会导致麻烦，因为文档已被移动。您还需要通过将当前滚动位置添加到最终滚动值中来考虑当前滚动位置，这样它就不会“丢失”。

这是一个解决两个问题的示例：

function customScrollTo (section) {

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