使用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;
 });