Question

经过漫长的一天之后，我可能很傻，我可以让我的下一个锚点工作，带我进入点击的下一部分，但是通过以前的锚点，我只能回到顶部。

我的代码是：

// scroll next section

$('.charityhub-next').click(function() {
  var next = $('.fundraising-ideas');
  $(".fundraising-ideas").each(function(i, element) {
    next = $(element).offset().top;
    if (next - 10 > $(document).scrollTop()) {
      return false; // break
    }
  });
  $("html, body").animate({
    scrollTop: next
  }, 700);
});


// scroll prev section

$('.charityhub-prev').click(function() {
  var prev = $('section');

  $(".fundraising-ideas").each(function(i, element) {
    prev = $(element).offset().top;
    if (prev + 10 < $(document).scrollTop()) {
      return false; // break
    }
  });
  $("html, body").animate({
    scrollTop: prev
  }, 700);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="charity-hub-nav">
  <ul class="container">
    <li>
      <a href="#" class="charityhub-prev"><i class="fa fa-chevron-left" aria-hidden="true"></i>Previous Section</a>
    </li>
    <li>
      <a class='charity-hub-sections'>Show Sections <i class="fa fa-chevron-down" aria-hidden="true"></i></a>
    </li>
    <li>
      <a href="#" class="charityhub-next">Next Section <i class="fa fa-chevron-right" aria-hidden="true"></i></a>
    </li>
  </ul>
</div>
<section class="fundraising-ideas">
  <h1>Some Heading</h1>
  <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour.</p>
  <div class="idea-section">
    <h2>Second heading</h2>
    <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum,
      you need to be sure there isn't anything embarrassing hidden in the middle of text. </p>
    <img src="" alt="">
    <button>Get more info</button>
  </div>
</section>

<section class="fundraising-ideas">
  <h1>Some Heading</h1>
  <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour.</p>
  <div class="idea-section">
    <h2>Second heading</h2>
    <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum,
      you need to be sure there isn't anything embarrassing hidden in the middle of text. </p>
    <img src="" alt="">
    <button>Get more info</button>
  </div>
</section>

基本上，我只需要前一个按钮转到上一节，而不是一直到顶部

非常感谢

Answer 1

尝试以下方法。目的是尝试查找所有其元素在当前滚动量之上偏移的元素。有了该列表后，抓住最后一个列表，应该将前一个列表显示为可见列表。

$('.charityhub-prev').click(function() {
  var prev = $(".fundraising-ideas").filter(function(i, element) {
    return $(element).offset().top + 10 < $(document).scrollTop();
  }).last().offset().top;

  $("html, body").animate({
    scrollTop: prev
  }, 700);
});

jQuery上一页按钮无法正常工作

1 个答案: