javascript - jQuery 滚动到按钮单击的部分

Question

我在使用同一个按钮分别滚动每个部分时遇到问题。如果我第一次点击，这应该会把我带到第 2 部分，然后如果我再次点击同一个按钮，这应该会把我带到第 3 部分

我试图通过每次点击将 500 像素滚动到底部或类似的东西来实现它，但似乎这对我来说不是好的解决方案。

$(document).ready(function() {

  $('.scroller').click(function() {

    var fuller = $(this).closest('.fullscreen').next(),
      section = $(this).closest('.section');

    section.animate({
      scrollTop: section.scrollTop() + fuller.offset().top
    }, 700);

  });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="section">
  <a href=# class="scroller">Scroll</>
  <div class="section1">
    <div class="section1">Content2</div>
  </div>
  <div class="section2">
    <div class="half-screen">
      <div class="s">Content 2</div>
    </div>
  </div>
  <div class="section3">
    <span>
            <div class="">Content 3</div>
        </span>

  </div>
  <div class="section4">
    <div class="half-screen">
      <div class="s">Content 4</div>
    </div>
  </div>
</div>

这种代码只将我发送到 section2 然后不起作用。

Answer 1

您可以使用计数器 来完成您的任务。单击按钮时，我们检查 counter 是否未达到部分(要滚动到的部分)长度(页面中部分的数量)，滚动到下一部分并递增counter 否则滚动到第一部分并将 0 分配给计数器，以便我们可以再次单击并具有相同的功能。

但在深入研究代码(逻辑)之前，我有几点要谈:

• 您的 HTML 在语义上是错误的:inline 级别元素(在您的情况下是 span)不能承载 block 级别元素(在您的情况下为 div)。
• 按钮(a.scroller 元素)是唯一具有滚动功能的组件，根据它的 ID 选择它(在 jQuery 中) (我们会给它一个)似乎比 class 更好(因为 jQuery 将使用 native getElementByID 来更快选择元素，您可以阅读 jQuery 代码并了解它是如何完成选择工作的)。
• 正如我试图说的，类 用于选择页面中的多个元素。这些部分(要滚动到)应该有一个通用的 类(也将在 jQuery 中使用)。

因此，基于以上几点，我为您准备了一个演示示例，您可以在其中进行扩展以获得所需的最终结果。此外，该示例包含大量有用的注释，可在您阅读代码时提供帮助。

$(() => {
  /**
  * select the main elements having affect in the process.
  * sections: the sections to be scrolled to.
  * btn: the "a" element that that triggers the scrolling effect.
  * idx: the counter that used to distinguish which section should we scroll to. 
  **/
  let sections = $('.scroll-to'),
    btn = $("#scroller"),
    idx = 1;
  /** adding the click listener to the "a" element **/
  btn.on('click', e => {
    e.preventDefault(); /** preventing the jump to top (and adding "#" to the URL) **/
    idx >= sections.length && (idx = 0); /** if the counter reaches the number of the section in the page we must decrement it to 0 **/
    /** scroll effect: the "body" and the "html" elements should scroll not a section but the scroll destination is based on the section with the index "idx" offset from the top of the page (all the page not only the viewport) **/
    $("html, body").animate({
      scrollTop: $(sections[idx++]).offset().top
    }, 700);
  });
});

/** basic styling for the demo purposes and to allow the scroll effect to be seen **/

.scroll-to {
  height: 100vh;
  border: 2px solid blue;
}

#scroller {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translate3d(-50%, 0, 0);
  background-color: #000;
  color: #fff;
  padding: 8px 15px;
  border-radius: 0 0 4px 4px;
  text-align: center;
  box-shadow: 0 0 25px -1px rgba(18, 18, 18, .6);
  z-index: 999;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- no "span" elements having "div" ones which is semantically wrong -->

<!-- the sections to be scrolled to have a common class "scroll-to" which will be used to select all these section in "jQuery" -->

<!-- the "a" element now have an ID of "scroller" to select it rapidly with "jQuery" -->

<div class="section">
  <a href="#" id="scroller">Scroll</a>
  <div class="scroll-to fullscreen">
    Some content
  </div>
  <div class="scroll-to section2">
    <div class="half-screen">
      <div class="s">Content 2</div>
    </div>
  </div>
  <div class="scroll-to section3">
    Content 3
  </div>
  <div class="scroll-to section4">
    <div class="half-screen">
      <div class="s">Content 4</div>
    </div>
  </div>
</div>

我来这里是为了澄清。

希望我能进一步插入你。