Прокрутите вниз на один дел каждый раз, когда я нажимаю кнопку

Question

Я создал простое портфолио для отображения некоторых изображений. Я хотел бы добавить кнопку, которая прокручивает вниз один «элемент» за раз, например, кнопку pagedown.

У меня есть код, который работает только при первом нажатии кнопки, и я не могу понять, почему. В консоли.log кажется, я не могу получить правильную переменную y после прокрутки.

$('#gdb1').click(function() {
  var h = $(window).height();
  var y = $(document).scrollTop(); //your current y position on the page
  var inc = (h + y);
  console.log(y);

  $("#carousel").animate({
    scrollTop: inc
  }, 600);
  return false;
});

#button {
  display: block;
  background-color: red;
  position: fixed;
  padding: 22px top: 0;
  left: 0;
  cursor: pointer;
  z-index: 11111;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<div class="gdbox" id="button">
  <div id="gdb1" class="gdbutton fontwhitenshadow">DOWN</div>
</div>
<div id="carousel" class="snap">
  <div class="element">
    <div class="imgbox" style="background-color:#1a2342">
      <div class="shadow"></div>
      <img class="center-fit" src="https://via.placeholder.com/850.jpg">
    </div>
  </div>
  <div class="element">
    <div class="imgbox" style="background-color:#1a2342">
      <div class="shadow"></div>
      <img class="center-fit" src="https://via.placeholder.com/850.jpg/red">
    </div>
  </div>
  <div class="element">
    <div class="imgbox" style="background-color:#1a2342">
      <div class="shadow"></div>
      <img class="center-fit" src="https://via.placeholder.com/850.jpg">
    </div>
  </div>
  <div class="element" id="scroller">
    <div class="imgbox" style="background-color:#1a2342">
      <div class="shadow"></div>
      <img class="center-fit" src="https://via.placeholder.com/850.jpg">
    </div>
  </div>
</div>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>

Answer 1

var currentElement = 0;
$('#gdb1').click(function() {

//Length subtract by one, because at the end you can't scroll down anymore
if ($(".element").length-1 > currentElement)
  $('html').animate({
        scrollTop: $(".element").eq(++currentElement).offset().top
    }, 600);
    
  return false;
});

#button {
  display: block;
  background-color: red;
  position: fixed;
  padding: 22px top: 0;
  left: 0;
  cursor: pointer;
  z-index: 11111;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<div class="gdbox" id="button">
  <div id="gdb1" class="gdbutton fontwhitenshadow">DOWN</div>
</div>
<div id="carousel" class="snap">
  <div class="element">
    <div class="imgbox" style="background-color:#1a2342">
      <div class="shadow"></div>
      <img class="center-fit" src="https://via.placeholder.com/850.jpg">
    </div>
  </div>
  <div class="element">
    <div class="imgbox" style="background-color:#1a2342">
      <div class="shadow"></div>
      <img class="center-fit" src="https://via.placeholder.com/850.jpg/red">
    </div>
  </div>
  <div class="element">
    <div class="imgbox" style="background-color:#1a2342">
      <div class="shadow"></div>
      <img class="center-fit" src="https://via.placeholder.com/850.jpg">
    </div>
  </div>
  <div class="element" id="scroller">
    <div class="imgbox" style="background-color:#1a2342">
      <div class="shadow"></div>
      <img class="center-fit" src="https://via.placeholder.com/850.jpg">
    </div>
  </div>
</div>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>

вам не нужно использовать высоту окна, все, что вам нужно сделать, это использовать eq для выбора элемента. если вы хотите прокрутить #carousel, вы должны установить его на переполнение: scroll-y

Answer 2

Попробуйте этот скрипт.

 $('.gdbutton').click(function(){
      
      if($(".element").hasClass("active")){  
      var $next;
        if($(".element.active").next().length){
        	$next = $(".element.active").next();
        }
    	else{
          $next = $('.element:first-child'); // for scrolling to top again
        }    
      }     
       $(".element.active").removeClass('active');
       $($next).addClass("active");
     
    	var offset = $($next).offset();
        $('html, body').animate({
          scrollTop: offset.top
        }, 1000);
});

html body { margin: 0px; }
#button {
  display: block;
  background-color: red;
  position: fixed;
  padding: 22px top: 0;
  left: 0;
  cursor: pointer;
  z-index: 11111;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="gdbox" id="button">
  <div id="gdb1" class="gdbutton fontwhitenshadow">DOWN</div>
</div>
<div id="carousel" class="snap">
  <div class="element active"> <!-- added active class -->
    <div class="imgbox" style="background-color:#1a2342">
      <div class="shadow"></div>
      <img class="center-fit" src="https://via.placeholder.com/850.jpg">
    </div>
  </div>
  <div class="element">
    <div class="imgbox" style="background-color:#1a2342">
      <div class="shadow"></div>
      <img class="center-fit" src="https://via.placeholder.com/850.jpg/red">
    </div>
  </div>
  <div class="element">
    <div class="imgbox" style="background-color:#1a2342">
      <div class="shadow"></div>
      <img class="center-fit" src="https://via.placeholder.com/850.jpg">
    </div>
  </div>
  <div class="element" id="scroller">
    <div class="imgbox" style="background-color:#1a2342">
      <div class="shadow"></div>
      <img class="center-fit" src="https://via.placeholder.com/850.jpg">
    </div>
  </div>
</div>

Answer 3

Попробуйте это.

$('html, #carousel').animate({
   scrollTop: inc
 }, 600);

Проверьте рабочую демонстрацию.

https://jsfiddle.net/5v0np2m7/