javascript - jQuery hashchange 事件立即无速度执行动画

Question

我在使用 jQuery 和将动画包装在 hashchange 事件中时遇到问题。当事件被触发时，动画立即发生。我需要它是光滑的。

    jQuery( document ).ready(function() {
        jQuery(window).on('hashchange', function() {
                jQuery('body').animate({ scrollTop: jQuery(window.location.hash).offset().top}, 'slow');
        });
    });

如果我不将动画包装在 hashchange 事件中，一切都很好...

Answer 1

如果您将哈希更改为存在的 anchor ，它将自动跳转到该 anchor ，而无需等待动画。您可以看到，只需删除动画就会发生这种情况，因为它仍然会跳跃。可以通过在 URL 中使用实际上不包含具有相应 id 的元素的哈希来解决此问题，并更改选择器 scrollTop 来适应此问题。

例如，您可以将“about”部分的 ID 更改为 about-section 并继续使用 #about 作为哈希。然后，您可以使用 scrollTop: jQuery(window.location.hash + "-section")，而不是 scrollTop: jQuery(window.location.hash).offset().top。 offset().top 以避免自动跳转到该元素。