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