jquery scroll to top animation
<p>im trying to implement a scroll to top animation on my site 
<a href="http://www.cmclove.org/bootstrap" rel="nofollow">http://www.cmclove.org/bootstrap</a> </p>

<p>but whenever i scroll to top and try to scroll back down it seems like the page is fighting me and doesent want to go back down.  </p>

<p>you might have to do it a couple of times and or try to scroll immediately back down after the animation finishes</p>

<p>heres the jquery :</p>

<pre><code>$(document).ready(function() {
    $(function() {

        /* set variables locally for increased performance */

        var scroll_timer;
        var displayed = false;
        var $message = $('#message a');
        var $window = $(window);
        var top = $(document.body).children(0).position().top;

        /* react to scroll event on window */
        $window.scroll(function(e) {

            window.clearTimeout(scroll_timer);
            e.preventDefault();
            scroll_timer = window.setTimeout(function(e) {
                if ($window.scrollTop() &lt;= top) {
                    displayed = false;
                    $message.fadeOut(800);
                    e.preventDefault();

                }
                else if (displayed == false) {
                    displayed = true;
                    $message.stop(true, true).show(1000).click(function(e) {
                        $('html, body').animate({
                            scrollTop: 0
                        }, 'slow');
                        $message.fadeOut(1000);
                        e.preventDefault();


                    });
                }

            }, 100);
        });
    });
});​
</code></pre>

<p>heres the html </p>

<pre><code>  &lt;a id="top"&gt;&lt;/a&gt;

  &lt;!--- all my html stuff --&gt;

  &lt;div id="message"&gt;&lt;a href="#top"&gt;&lt;/a&gt;&lt;/div&gt;
  &lt;/footer&gt;
</code></pre>
