Question

im trying to implement a scroll to top animation on my site
http://www.cmclove.org/bootstrap

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.

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

heres the jquery :

$(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() <= 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);
        });
    });
});​

heres the html

  <a id="top"></a>

  <!--- all my html stuff -->

  <div id="message"><a href="#top"></a></div>
  </footer>

Answer 1

I know what is happening. You are binding a new ‘click’ event every time ‘scroll to top’ happens. And since they add up, every time the scroll bar freezes for 1 second more. So the first time you scroll to top, nothing freezes. Next time it freezes for a second, next time for 2 seconds and etc.

I think you need:

$message.unbind('click');

right before:

$message.stop(true, true).show(1000).click(function(e) {

i.e.:

else if (displayed == false) {
  displayed = true;
  $message.unbind('click');
  $message.stop(true, true).show(1000).click(function(e) {
  ...

If you don’t believe me, make it freeze by doing a couple of times ‘go to top’, then write this in the Firebug console:

$('#message a').unbind('click');

and try it again. You will see that the freezing is gone (until you accumulate it again with multiple bindings of ‘click’ event).

Cheers.