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来避免自动跳转到元素。