jQuery动画函数异常：上下滚动按钮仅单一功能生效求助

你这代码的问题出在事件绑定的时机和方式上：
当你用$('.upBtn').click()和$('.upBtn.up').click()直接绑定事件时，事件是绑定在当时匹配到的DOM元素上的——不管之后元素的类怎么加或者删，已经绑定的事件不会自动消失。

举个实际场景的例子：

• 如果页面加载时scrollTop>600，.upBtn会被加上up类，这时候两个点击事件都会绑定到这个按钮上。之后哪怕你把up类移除，那个.upBtn.up的点击事件依然挂在按钮上，点击时还是会触发滚到顶部的逻辑。
• 如果页面加载时scrollTop<=600，只有.upBtn的点击事件被绑定，之后加上up类后，.upBtn.up的事件并没有自动绑定上去，这时候点击只会触发滚到600的逻辑。

方法一：单事件内判断类名（推荐） #

把两个点击事件合并成一个，在事件内部实时判断按钮的类名，再执行对应逻辑：

var toppos = $(window).scrollTop();

if (toppos > 600) {
    $('.upBtn').addClass('up');
}

$(window).scroll(function(){
    if ($(this).scrollTop() > 600) {
        $('.upBtn').addClass('up');
    } else {
        $('.upBtn').removeClass('up');
    }
});

// 合并为单个点击事件
$('.upBtn').click(function(){
    if ($(this).hasClass('up')) {
        $('html, body').animate({scrollTop : 0}, 800, 'easeInOutCubic');
    } else {
        $('html, body').animate({scrollTop : 600}, 800, 'easeInOutCubic');
    }
});

方法二：事件委托 #

把点击事件绑定到父元素（比如document）上，利用事件委托的特性，每次点击时才检查元素的类名：

var toppos = $(window).scrollTop();

if (toppos > 600) {
    $('.upBtn').addClass('up');
}

$(window).scroll(function(){
    if ($(this).scrollTop() > 600) {
        $('.upBtn').addClass('up');
    } else {
        $('.upBtn').removeClass('up');
    }
});

// 事件委托绑定不同状态的点击逻辑
$(document).on('click', '.upBtn:not(.up)', function(){
    $('html, body').animate({scrollTop : 600}, 800, 'easeInOutCubic');
});

$(document).on('click', '.upBtn.up', function(){
    $('html, body').animate({scrollTop : 0}, 800, 'easeInOutCubic');
});

内容的提问来源于stack exchange，提问作者hes