title: topScroll animation blocking the pages scroll in jquery
body: <p>I've built this website which is basically divided in 3 divs and i wrote a few animation scripts when scrolling through them.</p>
  
  <pre><code>&lt;div id="home"&gt;&lt;/div&gt;
  &lt;div id="portfolio"&gt;&lt;/div&gt;
  &lt;div id="about"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>I have the whole demo here: <a href="https://jsfiddle.net/7cv6zd1L/" rel="nofollow noreferrer">https://jsfiddle.net/7cv6zd1L/</a> where you can obviously see that after the animation to the 'portfolio' div my page won't continue to scroll downwards. I've had the same problem where it wouldn't scroll up but i fixed it here:</p>
  
  <pre><code>var lastScroll = $(window).scrollTop();
  $(window).scroll(function () {
                  console.log(lastScroll);
                  var scrollTop = $(window).scrollTop();
                  var divTop = $("#portfolio").offset().top;
                  if ( scrollTop &gt; lastScroll &amp;&amp; scrollTop &gt; $('body').height() / 3) {
                      $('body').stop().animate({
                      scrollTop: divTop
                      }, 50);
                  }
                  lastScroll = scrollTop;
              });
  </code></pre>
  
  <p>I can't seem to wrap my head around the logic with the animation, a little help would be appreciated.</p>
  
  <p><strong>P.S.</strong> Don't let the missing images confuse you i didn't include them on purpose.</p>
  
  <p><strong>EDIT:</strong> I want to be able to use the same code from above in the transition to the next div.</p>