javascript - 如何在按钮单击和手动向下滚动时重置滚动值？

Question

您好，我正在实现一个网页，我想在其中单击一个项目向下滚动到下一个元素。当它有特定的顺序时，这工作正常，但如果我在选择错误的项目后更改特定部分中的项目，这个顺序就会搞砸。代码片段如下。

$('.item').on('click', function(e) {
  $(this).parent().parent().find('p')
    .removeClass('selectedItem');
  $(this).find('p')
    .addClass('selectedItem');
  e.preventDefault();
  var $current = $('.first'),
    $next = $current.nextAll('.step').first();
  if (!$next.length) {
    $next = $('.step').first();
  }

  if ($next.length) {


    var $next = $next.first();
    var top = $next.offset().top;

    $current.removeClass('first');

    $('body').stop(true, true).delay(1000).animate({
      scrollTop: top
    }, 1000, function() {

      $next.addClass('first');

    });
  }
});

.selectedItem {
  background-color: red;
}

.step {
  background-color: blue;
  height: 500px;
}

.item {
  border: 2px white solid;
  height: 50px;
  width: 50px;
  margin: 5px;
  float: left;
}

p {
  margin: 5px;
  height: 40px;
  width: 40px;
 cursor:pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="step first">
  <h1 class='section'>
First Section
</h1>
  <div class="item">
    <p>
      hello
    </p>
  </div>
  <div class="item">
    <p>
      hello
    </p>
  </div>
  <div class="item">
    <p>
      hello
    </p>
  </div>
  <div class="item">
    <p>
      hello
    </p>
  </div>
  <div class="item">
    <p>
      hello
    </p>
  </div>
</div>
</div>
<div class="step">
  <h1 class='section'>
Second Section
</h1>
  <div class="item">
    <p>
      hello
    </p>
  </div>
  <div class="item">
    <p>
      hello
    </p>
  </div>
  <div class="item">
    <p>
      hello
    </p>
  </div>
  <div class="item">
    <p>
      hello
    </p>
  </div>
  <div class="item">
    <p>
      hello
    </p>
  </div>
</div>
<div class="step">
  <h1 class='section'>
Third Section
</h1>
  <div class="item">
    <p>
      hello
    </p>
  </div>
  <div class="item">
    <p>
      hello
    </p>
  </div>
  <div class="item">
    <p>
      hello
    </p>
  </div>
  <div class="item">
    <p>
      hello
    </p>
  </div>
  <div class="item">
    <p>
      hello
    </p>
  </div>
</div>

在上面给出的示例中，有三个部分，如果我单击第 1 部分中的一个项目，然后向下滚动到第 2 部分。这同样适用于第 2 部分的项目，但如果我手动向上滚动到上一个部分，然后重新更正我的项目，这个顺序搞砸了。

Answer 1

问题是您是通过添加的类找到下一个目标，而不是通过单击的元素。这行得通

$('.item').on('click', function(e) {
  $(this).parent().parent().find('p')
    .removeClass('selectedItem');
  $(this).find('p')
    .addClass('selectedItem');
  e.preventDefault();
  var $current = $(this).closest(".step");
  var $next = $current.next('.step');
  console.log($next);
  if (!$next.length) {
    $next = $('.step').first();
  }

  var top = $next.offset().top;

  $('body').stop(true, true).delay(1000).animate({
    scrollTop: top
  }, 1000);

});

.selectedItem {
  background-color: red;
}
.step {
  background-color: blue;
  height: 500px;
}
.item {
  border: 2px white solid;
  height: 50px;
  width: 50px;
  margin: 5px;
  float: left;
}
p {
  margin: 5px;
  height: 40px;
  width: 40px;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="step first">
  <h1 class='section'>
First Section
</h1>
  <div class="item">
    <p>
      hello
    </p>
  </div>
  <div class="item">
    <p>
      hello
    </p>
  </div>
  <div class="item">
    <p>
      hello
    </p>
  </div>
  <div class="item">
    <p>
      hello
    </p>
  </div>
  <div class="item">
    <p>
      hello
    </p>
  </div>
</div>
</div>
<div class="step">
  <h1 class='section'>
Second Section
</h1>
  <div class="item">
    <p>
      hello
    </p>
  </div>
  <div class="item">
    <p>
      hello
    </p>
  </div>
  <div class="item">
    <p>
      hello
    </p>
  </div>
  <div class="item">
    <p>
      hello
    </p>
  </div>
  <div class="item">
    <p>
      hello
    </p>
  </div>
</div>
<div class="step">
  <h1 class='section'>
Third Section
</h1>
  <div class="item">
    <p>
      hello
    </p>
  </div>
  <div class="item">
    <p>
      hello
    </p>
  </div>
  <div class="item">
    <p>
      hello
    </p>
  </div>
  <div class="item">
    <p>
      hello
    </p>
  </div>
  <div class="item">
    <p>
      hello
    </p>
  </div>
</div>