jQuery动画功能不能正常工作

Question

我有一个简单的"然后往下走按钮:

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(){
$('html, body').animate({scrollTop : 600}, 800, 'easeInOutCubic');
});
$('.upBtn.up').click(function(){
$('html, body').animate({scrollTop : 0}, 800, 'easeInOutCubic');
});

然而，两个函数中只有一个有效。如果我的scrollTop>600按钮只触发带有。up的按钮——不管类是否被移除。我困惑。

Answer 1

您的代码有两个主要问题。首先，当单击发生时，两个click处理程序都将触发，从而导致竞争条件。附加一个单击事件处理程序，根据元素是否具有up类来移动滚动位置。

其次，设置scrollTop等于到600，因此> 600检查将永远不会命中。你需要使用>= 600.

var topPos = $(window).scrollTop();
$('.upBtn').toggleClass('up', topPos >= 600);
$(window).scroll(function() {
$('.upBtn').toggleClass('up', $(this).scrollTop() >= 600);
});
$('.upBtn').on('click', e => {
$('html, body').animate({
scrollTop: $(e.target).hasClass('up') ? 0 : 600
}, 800, 'easeInOutCubic');
});

.content {
height: 610px;
}
.upBtn {
position: fixed;
top: 50px;
left: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js" integrity="sha512-0QbL0ph8Tc8g5bLhfVzSqxe9GERORsKhIn1IrpxDAgUsbBGz/V7iSav2zzW325XGd1OMLdL4UiqRJj702IeqnQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<div class="content">
Scroll down...
</div>
<div class="content">
Scroll back up...
</div>
<button class="upBtn">Toggle Position</button>