jQuery hashchange 事件立即无速度执行动画答案

【问题标题】：jQuery hashchange event instantly executes animation with no speedjQuery hashchange 事件立即无速度执行动画
【发布时间】：2015-08-28 18:59:51
【问题描述】：

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

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

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

【问题讨论】：

标签： javascript jquery jquery-animate hashchange

【解决方案1】：

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

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

【讨论】：

我没有使用哈希锚，我在 div 上使用 id。这不是问题，如果我在准备好的文档上调用动画，它会顺利滚动到所需的 div 没有任何问题。但是当我将它包装在 haschange 事件函数中时，动画速度会中断。
这就是 id 在 div 上的作用，它们添加锚点。假设您的网址是example.com/#about。如果你有一个 id 为 about 的元素，它会自动跳转到那里。假设您从example.com 开始，并将您的URL 更改为example.com/#about。它会自动跳转到任何具有 id about 的元素（如果存在）并触发 hashchange 事件。但是，由于它已经存在，因此动画不会为任何内容设置动画。
它的工作，不敢相信我怎么没想到...谢谢你