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

2023年6月25日 159次阅读

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

$('.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部分的项目,但如果我手动向上滚动到上一部分并重新更正我的项目这个序列搞砸了.

最佳答案 问题是你是通过添加的类找到下一个目标,而不是被点击的元素.这很有效

$('.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>
点赞