使用 scrollTop 的奇怪行为答案

【问题标题】：Strange behavor using scrollTop使用 scrollTop 的奇怪行为
【发布时间】：2014-01-24 15:13:24
【问题描述】：

我在使用 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/

你可以看到两种奇怪的行为：

如果点击“section 1”而不是“section 2”而不是“section 3”，则第 3 部分不起作用！
如果您在同一部分链接上单击两次，则第二次会在页面顶部滚动

【问题讨论】：

标签： javascript jquery

【解决方案1】：

customScrollTo 方法存在两个问题。

首先，您使用的是.offset() 而不是.position()。这将返回相对于文档的位置，而不是 #wrapper div。这在这里几乎看不到，因为 div 无论如何都接近文档的顶部，但是当您将它移到页面下方时会遇到麻烦。

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

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

function customScrollTo (section) {

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

【讨论】：

【解决方案2】：

使用这个：

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

.offset() 函数获取相对于文档的坐标，而.position() 函数获取相对于父级的坐标。但是.position().top 值会随着元素的滚动而变化。添加父级的.scrollTop() 值可以对此进行调整。

jsfiddle

【讨论】：

【解决方案3】：

试试这个，我也修改了你的标记。看到这个DEMO

$('#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;
 });

【讨论】：