如何滚动到同一个类的前一个div

Question

我有一个很长的页面，里面有很多类元素。还有2个按钮：next和prev。

滚动到下一个元素的

This script对我很有用：

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

有人可以通过prev解决方案帮助我吗？

Answer 1

应该这样做：

＆＃13;

＆＃13;

$(document).ready(function(){
    $('.button.next').click(function() {
       var target;
       $("p").each(function(i, element) {
         target = $(element).offset().top;
         if (target - 10 > $(document).scrollTop()) {
           return false; // break
         }
       });
       $("html, body").animate({
         scrollTop: target
       }, 700);
    });
    
    $('.button.prev').click(function() {
       var target;
       $("p").each(function(i, element) {
         current = $(element).offset().top;
         if (current + 10 > $(document).scrollTop()) {
           if (i == 0){
             target = 0;
           }
           else {
             target = $("p").eq(i-1).offset().top
           }
           return false; // break
         }
       });
       $("html, body").animate({
         scrollTop: target
       }, 700);
    });
});

＆＃13;

p {
  height:600px;
}
.button {
  position:fixed;
  cursor:pointer;
  top:5%; 
} 
.next {
  right:5%;
}
.prev {
  right:15%;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="button prev">PREV</div>
<div class="button next">NEXT</div>

<h1>Welcome to My Homepage</h1>

<p>This is the first paragraph.</p>
<p>This is the second paragraph.</p>
<p>This is the third paragraph.</p>
<p>This is the last paragraph.</p>

＆＃13;

＆＃13;

＆＃13;