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

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

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

jQuery hashchange事件立即执行动画没有速度

jQuery hashchange event instantly executes animation with no speed

javascript

jquery

hashchange

jquery-animate