Как перейти к следующему div с помощью Javascript?

Поэтому я делаю сайт с большим количеством Div, которые занимают 100% высоты. И я хочу сделать кнопку, чтобы при ее нажатии плавно переходить к следующему разделу. Я закодировал что-то, поэтому, когда он нажимается, он прокручивается до определенного div.

$(".next").click(function() {
    $('html,body').animate({
        scrollTop: $(".p2").offset().top},
        'slow');
});

body{
  margin: 0;
  height: 100%;
}

.p1{
  height: 100vh;
  width: 70%;
  background-color: #2196F3;
}
.p2{
  height: 100vh;
  width: 70%;
  background-color: #E91E63;
}
.p3{
  height: 100vh;
  width: 70%;
  background-color: #01579B;
}

.admin{
  background-color: #B71C1C;
  height: 100vh;
  position: fixed;
  right: 0%;
  top: 0%;
  width: 30%;
  float: left;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="p1">
  
</div>
<div class="p2">
  
</div>
<div class="p3">
  
</div>

<div class="admin">
  
  <button class="next">NEXT</button>
  
</div>

Ответы

Ответ 1

Чтобы это работало, вам нужно идентифицировать отображаемый в данный момент div. Для этого вы можете применить класс к элементу, который отображается в данный момент. Затем вы можете использовать next() чтобы пройти через все.

Также обратите внимание на приведенный ниже пример добавления общего класса ко всем элементам .p, чтобы высушить CSS и облегчить обход DOM.

$(".next").click(function() {
  var $target = $('.p.active').next('.p');
  if ($target.length == 0)
    $target = $('.p:first');
    
  $('html, body').animate({
    scrollTop: $target.offset().top
  }, 'slow');

  $('.active').removeClass('active');
  $target.addClass('active');
});

body {
  margin: 0;
  height: 100%;
}

.p {
  height: 100vh;
  width: 70%;
}
.p1 {
  background-color: #2196F3;
}
.p2 {
  background-color: #E91E63;
}
.p3 {
  background-color: #01579B;
}

.admin {
  background-color: #B71C1C;
  height: 100vh;
  position: fixed;
  right: 0%;
  top: 0%;
  width: 30%;
  float: left;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="p p1 active"></div>
<div class="p p2"></div>
<div class="p p3"></div>
<div class="admin">
  <button class="next">NEXT</button>
</div>

Ответ 2

Используйте то же имя класса для контейнера. Начинайте с первого элемента. Каждый раз, когда кликаете на целевой элемент следующего scroller

var f = $('.p1');
var nxt = f;
$(".next").click(function() {

  if (nxt.next('.scroller').length > 0) {
    nxt = nxt.next('.scroller');
  } else {
    nxt = f;
  }
  $('html,body').animate({
      scrollTop: nxt.offset().top
    },
    'slow');
});

body {
  margin: 0;
  height: 100%;
}

.p1 {
  height: 100vh;
  width: 70%;
  background-color: #2196F3;
}

.p2 {
  height: 100vh;
  width: 70%;
  background-color: #E91E63;
}

.p3 {
  height: 100vh;
  width: 70%;
  background-color: #01579B;
}

.admin {
  background-color: #B71C1C;
  height: 100vh;
  position: fixed;
  right: 0%;
  top: 0%;
  width: 30%;
  float: left;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="p1 scroller">

</div>
<div class="p2 scroller">

</div>
<div class="p3 scroller">

</div>

<div class="admin">

  <button class="next">NEXT</button>

</div>

Ответ 3

Вот базовая версия, которая движется вперед и оборачивается к началу, когда достигает последнего слайда. Мы храним currSlide вне цикла и увеличиваем число внутри функции.

Для удобства я добавил класс slide к каждому слайду, который позволяет мне:

легко посчитать длину слайдов
сжать CSS

let currSlide = 1;
const SLIDE_LENGTH = $('.slide').length;
$(".next").click(function() {
  currSlide = currSlide === SLIDE_LENGTH ? 1 : ++currSlide;
  $('html,body').animate({
      scrollTop: $('.p${currSlide}').offset().top
    },
    'slow');
});

body {
  margin: 0;
  height: 100%;
}

/* Less repetition */
.slide {
  height: 100vh;
  width: 70%;
}

.p1 {
  background-color: #2196F3;
}

.p2 {
  background-color: #E91E63;
}

.p3 {
  background-color: #01579B;
}

.admin {
  background-color: #B71C1C;
  height: 100vh;
  position: fixed;
  right: 0%;
  top: 0%;
  width: 30%;
  float: left;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="slide p1"></div>
<div class="slide p2"></div>
<div class="slide p3"></div>

<div class="admin">
  <button class="next">NEXT</button>
</div>