Jquery not scrolling to div id
<p>I am currently attempting to scroll to a certain div id using jquery.</p>

<p>The code is below.</p>

<pre><code>jQuery(document).ready(function($){
    var prevScrollTop = 0;
    var $scrollDiv    = jQuery('div#container');
    var $currentDiv   = $scrollDiv.children('div:first-child');

    var $sectionid    = 1;
    var $numsections  = 5;

    $scrollDiv.scroll(function(eventObj)
    {
        var curScrollTop = $scrollDiv.scrollTop();
        if (prevScrollTop &lt; curScrollTop)
        {
        // Scrolling down:
            if ($sectionid+1 &gt; $numsections) {
                console.log("End Panel Reached");
            }
            else {
                $currentDiv = $currentDiv.next().scrollTo();
                console.log("down");
                console.log($currentDiv);
                $sectionid=$sectionid+1;
                console.log($currentDiv.attr('id'));
                var divid =$currentDiv.attr('id');
                jQuery('html, body').animate({scrollTop:jQuery('#'+divid).position().top}, 'slow');
                }
        }
        else if (prevScrollTop &gt; curScrollTop)
        {
        // Scrolling up:
            if ($sectionid-1 == 0) {
                console.log("Top Panel Reached");
            }
            else {
                $currentDiv = $currentDiv.prev().scrollTo();
                console.log("up");
                console.log($currentDiv);
                $sectionid=$sectionid-1;
                var divid =$currentDiv.attr('id');
                jQuery('html, body').animate({scrollTop:jQuery('#'+divid).position().top}, 'slow');

                }
        }
        prevScrollTop = curScrollTop;
    });
});
</code></pre>

<p>I can verify from the chrome console that all the values (i.e. the div id) are correct.
Yet, there is no animation at all.</p>

<p>The website goes like this.</p>

<pre><code>&lt;div id="header"&gt;
&lt;!-- Floating Header --&gt;
&lt;/div&gt;
&lt;div id="container"&gt;
    &lt;div id="panel1"&gt;
        &lt;!--content of panel1 --&gt;
    &lt;/div&gt;
    &lt;div id="panel2"&gt;
       &lt;!--content of panel2 --&gt;
    &lt;/div&gt;
    &lt;div id="panel3"&gt;
        &lt;!--content of panel3 --&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>The part that needs scrolling are the 100% width/height panels, which are inside the container, which is a scrolling div.</p>
