jQuery动画功能不正常

yvt65v4c 于 2023-04-20 发布在 jQuery

关注(0)|答案(1)|浏览(107)

我有一个简单的“向上”和“向下”按钮，像这样：

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的那个-不管类是否被删除。我很困惑。

jquery

来源：https://stackoverflow.com/questions/75989561/jquery-animation-function-not-working-right

1条答案

按热度按时间

erhoui1w1#

你的代码有两个主要问题。首先，当点击发生时，两个click处理程序都会触发，导致竞争条件。附加一个单击事件处理程序，根据元素是否具有up类来移动滚动位置。
其次，您将scrollTopequal设置为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>

赞(0）回复(0）举报 2023-04-20

我来回答

jQuery动画功能不正常

1条答案

相关问题

热门标签

最新问答