How to scroll to next div using Javascript? : <p>So I'm making a website with a lot of Divs that take 100% height. 
And I want to make a button so when it's clicked to smoothly scroll to next div.
I've coded something so when its clicked, it scrolls to specific div.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$(".next").click(function() {
    $('html,body').animate({
        scrollTop: $(".p2").offset().top},
        'slow');
});</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>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;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;div class="p1"&gt;
  
&lt;/div&gt;
&lt;div class="p2"&gt;
  
&lt;/div&gt;
&lt;div class="p3"&gt;
  
&lt;/div&gt;

&lt;div class="admin"&gt;
  
  &lt;button class="next"&gt;NEXT&lt;/button&gt;
  
&lt;/div&gt;</code></pre>
</div>
</div>
</p>
