jQuery ScrollTop不适用于固定元素

Question

我已经在屏幕底部创建了一个div。单击时，我希望它滚动到下一堂课。我可以获取.top值，但它不会滚动。我已经安装了jQuery，并花了3个小时在这里进行所有尝试。该项目使用魔术滚动，但不知道如何使用-我要添加到现有项目中。这会阻止它工作吗？我只使用锚标签，但是当用户滚动时，该按钮必须一直显示在屏幕上（所以一个按钮可以完成所有操作）。我已经试过了：scroll up/down to sections with fixed buttons-同样的结果，没有滚动发生>

$(document).ready(function() {

  $(document).on("click", ".next", function(e) {

    topPos = $(".container").eq($(".container").index($('.container')) + 1); //find next container
    console.log("Top" + topPos.position().top); //this outputs 1536.09375 for the second container
    $('html, body').animate({
      scrollTop: topPos
    }, 1000);
  });

});
  .next {
  bottom: 15px;
  padding: 3%;
  background-color: #d9d9d9;
  padding: 22px 23px 26px 23px;
  position: fixed;
  right: 19%;
  z-index: 99;
}

.down-arrow {
  box-sizing: border-box;
  height: 21px;
  width: 21px;
  border-style: solid;
  border-color: white;
  border-width: 0px 5px 5px 0px;
  transform: rotate(45deg);
  transition: border-width 150ms ease-in-out;
  &:hover {
    border-bottom-width: 4px;
    border-right-width: 4px;
  }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="next">
  <div class="down-arrow"></div>
</div>
<article>
  <div class="container">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at nibh malesuada, imperdiet purus et, laoreet diam. Vivamus ullamcorper gravida magna, vitae rutrum nibh viverra id. Duis eu nibh dolor. Pellentesque congue a dui in volutpat. Ut non placerat
      massa. Donec sollicitudin risus hendrerit tortor dignissim pharetra. Nam eu erat vel nulla elementum dictum consequat ut mauris. Donec egestas in nunc ut convallis. Fusce elit nisl, pulvinar et varius sed, sodales non elit. Duis a augue non quam
      maximus volutpat. Proin rhoncus lacus tempor, laoreet massa nec, venenatis tellus. Suspendisse eros sem, convallis vel risus ac, ultrices mattis justo. Morbi sit amet lectus vestibulum, lobortis tortor sed, tempor mi. Aliquam pretium, risus egestas
      sodales lobortis, sem sem vulputate elit, in lacinia neque tellus non elit.</p>
  </div>
</article>
<article>
  <div class="container">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at nibh malesuada, imperdiet purus et, laoreet diam. Vivamus ullamcorper gravida magna, vitae rutrum nibh viverra id. Duis eu nibh dolor. Pellentesque congue a dui in volutpat. Ut non placerat
      massa. Donec sollicitudin risus hendrerit tortor dignissim pharetra. Nam eu erat vel nulla elementum dictum consequat ut mauris. Donec egestas in nunc ut convallis. Fusce elit nisl, pulvinar et varius sed, sodales non elit. Duis a augue non quam
      maximus volutpat.</p>
  </div>
</article>
<article>
  <div class="container">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at nibh malesuada, imperdiet purus et, laoreet diam. Vivamus ullamcorper gravida magna, vitae rutrum nibh viverra id. Duis eu nibh dolor. Pellentesque congue a dui in volutpat. Ut non placerat
      massa. Donec sollicitudin risus hendrerit tortor dignissim pharetra. Nam eu erat vel nulla elementum dictum consequat ut mauris. Donec egestas in nunc ut convallis. Fusce elit nisl, pulvinar et varius sed, sodales non elit. Duis a augue non quam
      maximus volutpat. Proin rhoncus lacus tempor, laoreet massa nec, venenatis tellus. Suspendisse eros sem, convallis vel risus ac, ultrices mattis justo. Morbi sit amet lectus vestibulum, lobortis tortor sed, tempor mi. Aliquam pretium, risus egestas
      sodales lobortis, sem sem vulputate elit, in lacinia neque tellus non elit.Fusce elit nisl, pulvinar et varius sed, sodales non elit. Duis a augue non quam maximus volutpat. Proin rhoncus lacus tempor, laoreet massa nec, venenatis tellus. Suspendisse
      eros sem, convallis vel risus ac, ultrices mattis justo. Morbi sit amet lectus vestibulum, lobortis tortor sed, tempor mi. Aliquam pretium, risus egestas sodales lobortis, sem sem vulputate elit, in lacinia neque tellus non elit.</p>
  </div>
</article>

我已经在屏幕底部创建了一个div。单击时，我希望它滚动到下一堂课。我可以获取.top值，但它不会滚动。我已经安装了jQuery，并花了3个小时...

Answer 1

尝试此代码：

Answer 2

您可以获取用户滚动的数量，并寻找该点之后的元素以知道下一个。然后只需抓住第一个并滚动到它即可。