jQuery to top function disallows scrolling

Question

I'm creating magento shop and i want to make toTop button available after user scrolls the window.

I paste mine code bellow, it works fine, but after window is on top, i can't move it anymore, it's stuck.

jQuery(window).scroll(function() {
    var top = jQuery(window).scrollTop();

    if (top > 77) {
    jQuery(function() {
        jQuery('img.arrowup').fadeIn();
        jQuery('div.header_bg').show();
        jQuery('div.mainmenu').addClass('stick');
        jQuery('body div.header-container').next().addClass('pad');
        jQuery("img.arrowup").on('click', function(e) {
        e.preventDefault();
        jQuery('body,html').animate({scrollTop:10},800);
    });
    })} else {
        jQuery('div.header_bg').hide();
        jQuery('img.arrowup').fadeOut();
        jQuery('body div.header-container').next().removeClass('pad');
        jQuery('div.mainmenu').removeClass('stick');
    }

});

============================

Thanks everybody for help, here's working solution with stick header and toTop animation :)

    var scrollDiv=jQuery(this);
    jQuery(window).scroll(function(){  
        if(jQuery(window).scrollTop()<="77"){
            jQuery("img.arrowup").fadeOut("slow");
            jQuery('div.header_bg').hide();
            jQuery('div.mainmenu').removeClass('stick');
        } else {
            jQuery("img.arrowup").fadeIn("slow");
            jQuery('div.header_bg').show();
            jQuery('div.mainmenu').addClass('stick');
        }
    });
    jQuery("img.arrowup").click(function(){
        jQuery("html, body").animate({scrollTop:0},"slow");
    });

There is no reason for the `jQuery(function(){...})` why are you wrapping it? — epascarello, Feb 06 '13 at 18:06
And you keep adding click event handlers to the same element. One scroll down the page will cause 100's of click events to be added to one element. — epascarello, Feb 06 '13 at 18:10
Ok, this was stupid, didn't notice it. To make code a little more readable: http://pastebin.com/Jq2g8Kth — Paulina Kulikowska, Feb 06 '13 at 18:28

score 0 · Accepted Answer · edited May 23 '17 at 12:04

I suggest to read this answer first for understanding why animations creates conflict depends on scroll value, than give it a try to this:

$(document).ready(function() {
   $(window).scroll(function() {
      var scrollVal = $(this).scrollTop(); // use this instead of window

      if ( scrollVal >= 0 &&  scrollVal < 77 ) {
         //do something without animations
         $('div.header_bg').hide();
         $('div.mainmenu').removeClass('stick');

      } else if ( scrollVal === 77 ){
         //i didn't try this before but it may work,
         //since value equals 77 once, it may not create animation conflicts
         $('img.arrowup').fadeIn();

      } else if ( scrollVal > 77 ) {
         //do something without animations
         $('div.header_bg').show();
         $('div.mainmenu').addClass('stick');
      }
  });
});

jQuery to top function disallows scrolling

1 Answers1