Question

我有一个导航，想要点击每个li scrollTop到元素的顶部，但在li上多次点击后它无法正常工作，我知道为什么，例如滚动已经是0，然后元素顶部是50，滚动到50然后如果你点击150偏移顶部的另一个元素，滚动应该转到150但它会转到{{1} }，因为它现在在200上。我尝试了两个逻辑：

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

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

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

有什么想法吗？

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;
}

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>

多次点击后，ScrollTop to元素无效

1 个答案: