Question

我正在创建magento商店，我想在用户滚动窗口后使toTop按钮可用。

我贴下了我的代码，它工作正常，但是在窗口顶部之后，我再也无法移动它了，它被卡住了。

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');
    }

});

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

感谢大家的帮助，这里有棒头和toTop动画的工作解决方案：）

    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");
    });

Answer 1

I suggest to read this answer first了解为什么动画会产生冲突取决于滚动值，而不是试一试：

$(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到top函数不允许滚动

1 个答案: