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

Question

您好我正在实现一个网页，我想在其中向下滚动到点击某个项目的下一个元素。当它具有特定的顺序时，这工作正常，但如果我在选择错误的项目之后更改特定部分中的项目，则此序列变得混乱。代码段如下所示。

＆＃13;

＆＃13;

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

    });
  }
});

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

在上面给出的示例中，有三个部分，让我们说如果单击第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>