时间戳

首页 > 解决方案 > 使用 jQuery 从一个 div 滚动到另一个（应该很容易）

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

问题描述

当我按下带有 class 的按钮时，我想要做的就是从第一个 div 滚动到第二个 div （两者都有“问题”类）next_btn。我觉得我的 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>

标签： jqueryscrolljquery-animate

解决方案

当您单击最后一个按钮时，您会收到此错误，因为他没有.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>

推荐阅读