javascript - 多次单击后 ScrollTop 到元素不起作用

Question

我有一个导航，希望在单击每个 li scrollTop 到元素顶部后，但是在多次单击 li 之后它不会工作正常，我知道为什么，例如滚动已经是 0 然后元素顶部是 50，滚动到 50 然后如果你点击另一个元素顶部偏移 150，滚动应该转到 150，但它转到 200，因为它现在在 50。我尝试了两种逻辑:

A.每次用户点击时滚动到零，但它不起作用。

$('ul').stop().animate({
    scrollTop: 0 }, 0);

B.减法元素偏移当前滚动位置的顶部，但它也不起作用。

var aTop = parseInt($(this).offset().top);
var cTop = parseInt($('ul').scrollTop());
var offset = aTop - cTop;

有什么想法吗？

$('li').click(function() {
  var offset = $(this).offset().top;
  $('ul').animate({
    scrollTop: offset
  }, 500);
});

ul {
  width: 200px;
  height: 300px;
  overflow: scroll;
}

li {
  margin-bottom: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>Sample 1</li>
  <li>Sample 2</li>
  <li>Sample 3</li>
  <li>Sample 4</li>
  <li>Sample 5</li>
  <li>Sample 6</li>
  <li>Sample 7</li>
  <li>Sample 8</li>
  <li>Sample 9</li>
  <li>Sample 10</li>
  <li>Sample 1</li>
  <li>Sample 2</li>
  <li>Sample 3</li>
  <li>Sample 4</li>
  <li>Sample 5</li>
  <li>Sample 6</li>
  <li>Sample 7</li>
  <li>Sample 8</li>
  <li>Sample 9</li>
  <li>Sample 10</li>
</ul>

Answer 1

您需要添加 ul 元素的 scrolltop，而不是减去它:

var offset = $(this).offset().top + $(this).parent().scrollTop();

片段:

$('li').click(function() {
  var offset = $(this).offset().top + $(this).parent().scrollTop();

  $('ul').animate({
    scrollTop: offset
  }, 500);
});

ul {
  width: 200px;
  height: 300px;
  overflow: scroll;
}

li {
  margin-bottom: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>Sample 1</li>
  <li>Sample 2</li>
  <li>Sample 3</li>
  <li>Sample 4</li>
  <li>Sample 5</li>
  <li>Sample 6</li>
  <li>Sample 7</li>
  <li>Sample 8</li>
  <li>Sample 9</li>
  <li>Sample 10</li>
  <li>Sample 1</li>
  <li>Sample 2</li>
  <li>Sample 3</li>
  <li>Sample 4</li>
  <li>Sample 5</li>
  <li>Sample 6</li>
  <li>Sample 7</li>
  <li>Sample 8</li>
  <li>Sample 9</li>
  <li>Sample 10</li>
</ul>