Comment faire défiler vers la prochaine div en utilisant Javascript?

Question

Je fais donc un site Web avec beaucoup de Divs qui prennent 100% de hauteur. Et je veux faire un bouton donc quand il est cliqué pour défiler en douceur vers la div suivante. J'ai codé quelque chose, donc lorsque vous cliquez dessus, il défile jusqu'à une div spécifique.

$(".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>

Answer 1

Puisque votre question demande "Comment faire en Javascript", je vais répondre à la question en quelques lignes de Vanilla JS:

var p = 1;
const container = document.getElementById('container');
var nextPage = function() {
  var topPos = document.getElementsByClassName('page')[p++].offsetTop;
  container.scrollTo({top: topPos, behavior: 'smooth'});
}

dans l'exemple ci-dessus page est le nom de classe que vous affectez à vos divs que vous souhaitez faire défiler, comme:

<div id="container">
  <div class="page p1"></div>
  <div class="page p2"></div>
  <div class="page p3"></div>
</div>

Puisque vous voulez faire défiler la fenêtre de saisie du navigateur, il vous suffit de remplacer

container.scrollTo({top: topPos, behavior: 'smooth'});

avec

window.scrollTo({top: topPos, behavior: 'smooth'});

ainsi:

var p = 1;
var nextPage = function() {
  var topPos = document.getElementsByClassName('page')[p++].offsetTop;
  window.scrollTo({top: topPos, behavior: 'smooth'});
}

Vous pouvez soustraire ou ajouter le nombre de pixels que vous souhaitez décaler à topPos s'il n'est pas dans la bonne position