jquery - 单击一个固定按钮滚动 3 个 div

Question

在这里，我试图通过单击一个固定按钮来滚动三个 div。如果我在第一个 div，我想滚动到第二个 div，如果我在第二个 div，我想滚动到第三个 div。

$(document).ready(function() {
  var h = $(window).height();
  $(".first, .second, .third").css("height", h);
  $("#btn1").click(function() {

    if ($('.first').is(':visible')) {
      $('html,body').animate({
        scrollTop: $(".second").offset().top
      }, 'slow');

    } else if ($('.second').is(':visible')) {
      $('html,body').animate({
        scrollTop: $(".third").offset().top
      }, 'slow');

    }
  });
});

.first {
  width: 100%;
  background: white;
}
.second {
  width: 100%;
  background: grey;
}
.third {
  width: 100%;
  background: lightgrey;
}
.scrollbtn {
  position: fixed;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<button class="scrollbtn" id="btn1" type="button">Click Me!</button>
<div class="first"></div>
<div class="second"></div>
<div class="third"></div>

Answer 1

您正在尝试使用 .is(':visible') 来确定元素是否在视口(viewport)中；这是不正确的。无论您是否需要滚动查看。

相反，您想评估 $(window).scrollTop()(当前滚动位置)是否小于 $(element).offset().top，元素顶部相对于window的位置。

修改后的代码段:

$(document).ready(function() {
  var h = $(window).height();
  $(".first, .second, .third").css("height", h);
  $("#btn1").click(function() {
    if ($(window).scrollTop() < $('.second').offset().top) {
      $('html,body').animate({
        scrollTop: $(".second").offset().top
      }, 'slow');

    } else {
      $('html,body').animate({
        scrollTop: $(".third").offset().top
      }, 'slow');

    }
  });
});

.first {
  width: 100%;
  background: white;
}
.second {
  width: 100%;
  background: grey;
}
.third {
  width: 100%;
  background: lightgrey;
}
.scrollbtn {
  position: fixed;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<button class="scrollbtn" id="btn1" type="button">Click Me!</button>
<div class="first"></div>
<div class="second"></div>
<div class="third"></div>