使用 jQuery 从一个 div 滚动到另一个（应该很容易）

Question

当我按下带有next_btn 类的按钮时，我想要做的就是从第一个 div 滚动到第二个 div（两者都有“问题”类）。我觉得我的 jQuery 是正确的，但是，当我单击时没有任何反应。

注意：之后我会添加更多问题，因此我不想为每个问题和每个按钮都使用一个 ID。

控制台错误：

未捕获的类型错误：无法读取未定义的属性“顶部”

$(".next_btn").click(function() {
  $('html, body').animate({
    scrollTop: $(this).parents().next('.question').offset().top
  }, 1000);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="question">
  <div class="row header">
    <div class="col-sm-12 logo">
      <img src="q.png" height="350px;">
    </div>
  </div>
  <div class="col-sm-12 buttons" style="left:0px; text-align:center;">
    <button class="btn next_btn">NEXT</button><br>
  </div>
</div>

<div class="question">
  <div class="row header">
    <div class="col-sm-12 logo">
      <img src="q.png" height="150px;">
    </div>
  </div>
  <div class="row content">
    <div class="col-sm-12 buttons" style="left:0px; text-align:center;">
      <button class="btn next_btn">NEXT</button><br>
    </div>
  </div>
</div>

Answer 1

单击最后一个按钮时会出现此错误，因为他没有.question，因此$(this).parents().next('.question') return undefined，您可以添加类似 sn-p 显示的条件。

//Get the next question
var next_question = $(this).parents().next('.question');

// Check if the question exist them animate
if (next_question.length) {
    $('html, body').animate({
      scrollTop: next_question.offset().top
    }, 1000);
}

$(".next_btn").click(function() {
  var next_question = $(this).parents().next('.question');

  if (next_question.length) {
    $('html, body').animate({
      scrollTop: next_question.offset().top
    }, 1000);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<br><br><br><br><br><br>
<div class="question">
  <div class="row header">
    <div class="col-sm-12 logo">
      <img src="q.png" height="350px;">
    </div>
  </div>
  <div class="col-sm-12 buttons" style="left:0px; text-align:center;">
    <button class="btn next_btn">NEXT</button><br>
  </div>
</div>

<div class="question">
  <div class="row header">
    <div class="col-sm-12 logo">
      <img src="q.png" height="150px;">
    </div>
  </div>
  <div class="row content">
    <div class="col-sm-12 buttons" style="left:0px; text-align:center;">
      <button class="btn next_btn">NEXT</button><br>
    </div>
  </div>
</div>

<div class="question">
  <div class="row header">
    <div class="col-sm-12 logo">
      <img src="q.png" height="150px;">
    </div>
  </div>
  <div class="row content">
    <div class="col-sm-12 buttons" style="left:0px; text-align:center;">
      <button class="btn next_btn">NEXT</button><br>
    </div>
  </div>
</div>

<div class="question">
  <div class="row header">
    <div class="col-sm-12 logo">
      <img src="q.png" height="150px;">
    </div>
  </div>
  <div class="row content">
    <div class="col-sm-12 buttons" style="left:0px; text-align:center;">
      <button class="btn next_btn">NEXT</button><br>
    </div>
  </div>
</div>
<br><br><br><br><br><br><br><br><br>