jQuery Предыдущая кнопка не работает должным образом

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