title: Jquery scroll 100% height div
body: <p>I'll have many divs with 100vh height, like #pg1, #pg2 stacked on top of each other. Then if I scroll down just a little bit or press an arrow button (link with a image that will be in the right corner) it will position the other div to occupy 100% of the page smoothly.</p>
  
  <p>EDIT: Something like this (not exactly): <a href="http://jsfiddle.net/wofbbzjy/" rel="nofollow noreferrer">http://jsfiddle.net/wofbbzjy/</a></p>
  
  
  
  <pre><code>&lt;div id="pg1"&gt;Teste&lt;/div&gt;
  &lt;div id="pg2"&gt;Teste&lt;/div&gt;
  &lt;div id="pg3"&gt;Teste&lt;/div&gt;
  </code></pre>
  
  
  
  <pre><code>$(document).ready(function(){
      $(window).scroll(function(){
          var content_height = $(document).height();
          var content_scroll_pos = $(window).scrollTop();
          var percentage_value = content_scroll_pos * 100 / content_height;
  
          if(percentage_value &gt;= 0){
              $('html,body').animate({
                scrollTop: $('#pg2').position().top
              }, 1000);
              return false;
          }
      });
  });
  </code></pre>
  
  
  
  <pre><code>#pg1, #pg2 {
      background-color: grey;
      height: 100vh;
      width: 100%;
  }
  #pg2 {
      background-color: yellow;
  }
  #pg3 {
      background-color: black;
  }
  </code></pre>