jquery - 每次按下按钮时向下滚动一个 div

Question

我创建了一个简单的组合来显示一些图像。我想添加一个可以一次向下滚动一个“元素”的按钮，例如向下翻页按钮。

我的代码仅在我第一次按下按钮时有效，我不明白为什么。在 console.log 中，滚动发生后我似乎无法获取正确的 y 变量。

$('#gdb1').click(function() {
  var h = $(window).height();
  var y = $(document).scrollTop(); //your current y position on the page
  var inc = (h + y);
  console.log(y);

  $("#carousel").animate({
    scrollTop: inc
  }, 600);
  return false;
});

#button {
  display: block;
  background-color: red;
  position: fixed;
  padding: 22px top: 0;
  left: 0;
  cursor: pointer;
  z-index: 11111;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<div class="gdbox" id="button">
  <div id="gdb1" class="gdbutton fontwhitenshadow">DOWN</div>
</div>
<div id="carousel" class="snap">
  <div class="element">
    <div class="imgbox" style="background-color:#1a2342">
      <div class="shadow"></div>
      <img class="center-fit" src="https://via.placeholder.com/850.jpg">
    </div>
  </div>
  <div class="element">
    <div class="imgbox" style="background-color:#1a2342">
      <div class="shadow"></div>
      <img class="center-fit" src="https://via.placeholder.com/850.jpg/red">
    </div>
  </div>
  <div class="element">
    <div class="imgbox" style="background-color:#1a2342">
      <div class="shadow"></div>
      <img class="center-fit" src="https://via.placeholder.com/850.jpg">
    </div>
  </div>
  <div class="element" id="scroller">
    <div class="imgbox" style="background-color:#1a2342">
      <div class="shadow"></div>
      <img class="center-fit" src="https://via.placeholder.com/850.jpg">
    </div>
  </div>
</div>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>

Answer 1

var currentElement = 0;
$('#gdb1').click(function() {

//Length subtract by one, because at the end you can't scroll down anymore
if ($(".element").length-1 > currentElement)
  $('html').animate({
        scrollTop: $(".element").eq(++currentElement).offset().top
    }, 600);
    
  return false;
});

#button {
  display: block;
  background-color: red;
  position: fixed;
  padding: 22px top: 0;
  left: 0;
  cursor: pointer;
  z-index: 11111;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<div class="gdbox" id="button">
  <div id="gdb1" class="gdbutton fontwhitenshadow">DOWN</div>
</div>
<div id="carousel" class="snap">
  <div class="element">
    <div class="imgbox" style="background-color:#1a2342">
      <div class="shadow"></div>
      <img class="center-fit" src="https://via.placeholder.com/850.jpg">
    </div>
  </div>
  <div class="element">
    <div class="imgbox" style="background-color:#1a2342">
      <div class="shadow"></div>
      <img class="center-fit" src="https://via.placeholder.com/850.jpg/red">
    </div>
  </div>
  <div class="element">
    <div class="imgbox" style="background-color:#1a2342">
      <div class="shadow"></div>
      <img class="center-fit" src="https://via.placeholder.com/850.jpg">
    </div>
  </div>
  <div class="element" id="scroller">
    <div class="imgbox" style="background-color:#1a2342">
      <div class="shadow"></div>
      <img class="center-fit" src="https://via.placeholder.com/850.jpg">
    </div>
  </div>
</div>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>

你不需要使用窗口高度来做，你所要做的就是使用 eq 来选择元素。如果你想滚动#carousel，你必须将其设置为溢出:scroll-y