Question

我在使用同一按钮分别滚动每个部分时遇到问题。如果是第一次单击，则应将我发送到section2，然后如果再次单击同一按钮，则应将我发送到section3

我试图通过每次单击将其滚动到底部或向下滚动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是否未达到长度（要滚动到的部分）（页面中部分的数目），滚动到下一个部分并增加{{1 }}否则滚动到第一部分并为计数器分配0，这样我们就可以再次单击并具有相同的功能。

但是在深入研究代码（逻辑）之前，我有几点要谈：

您的counter在语义上是错误的：HTML级元素（在您的情况下为inline）不能托管span级元素（block就您而言）。
该按钮（div元素）是唯一具有滚动功能的组件，请根据其a.scroller（在jQuery中进行选择）（我们将为其提供一个）似乎比ID更好（这是更快的，因为class将使用本机jQuery选择元素，您可以阅读getElementByID代码并了解它的工作方式选择工作）。
jQuery用于选择页面中的多个元素。这些部分（要滚动到的部分）应具有共同的classes（也将在class中使用）。

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

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;
}

我在这里有任何疑问。

希望我进一步推动了你。

jQuery滚动到按钮单击部分

1 个答案: