Question

我有一个简单的下一个和上一个选项卡，可在“部分”之间移动。当您单击下一个选项卡时，页面将向下移动并跳过下一个“部分”，然后转到下一个部分。

    var $sec = $("section");
$(".prev, .next").click(function() {
  var y = $sec.filter(function(i, el) {
    return el.getBoundingClientRect().top > 0;
  })[$(this).hasClass("next") ? "next" : "prev"]("section").offset().top;
  $("html, body").stop().animate({
    scrollTop: y
  });
});

      <div data-role="page" id="main">
        <section>
            <div id="home-section" class="section">
                <img src="images/welcome-homepage.jpg" />
            </div>
        </section>
        <section>
            <div id="about-section" class="section">
                <img src="images/about-us.jpg" />
            </div>
        </section>
        <section>
            <div id="service-charter-section" class="section">
                <img src="images/service-charter.jpg" />
            </div>
        </section>
        <section>
            <div id="testionials-section" class="section">
                <img src="images/about-us.jpg" />
            </div>
        </section>
    </div>

Answer 1

这应该有效。它不会不说明当前滚动位置，即，如果您向下滚动一半并单击下一步，它将从单击的最后一项开始连续进行。单击prev / next时，它只是对所有部分的位置进行排列并进行跳转。

jQuery(document).ready(function($) {
  var sectionPosition = 0;
  var scrollPositions = []

  function scroll(y) {
    $('html').stop().animate({
      scrollTop: y
    });
  }

  $("section").each(function(i, el) {
    scrollPositions.push(parseInt($(el).offset()['top']))
  })

  $(".prev, .next").click(function() {
    if ($(this).hasClass('next')) {
      scroll(scrollPositions[sectionPosition + 1]);
      if (sectionPosition < scrollPositions.length) {
        sectionPosition++;
      }
    } else if (sectionPosition > 0) {
      scroll(scrollPositions[sectionPosition - 1]);
      sectionPosition--;
    }
  });
});

JS下一个标签页跳转部分

1 个答案: