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

Question

我想做的就是当我用 class next_btn。我觉得我的 jQuery 是正确的，但是，当我点击时没有任何反应。

注意：我会在之后添加更多问题，所以我不想为每个问题和每个按钮都使用 id。

控制台错误：

Uncaught TypeError: Cannot read property 'top' of undefined

$(".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，你可以添加代码段显示的情况。

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

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

Scrolling from one div to another using jQuery (should be easy)

jquery

scroll

jquery-animate