在锚链接jQuery中滚动动画[关闭]答案

【问题标题】：Scroll animation inside anchor links jQuery [closed]在锚链接jQuery中滚动动画[关闭]
【发布时间】：2012-10-04 13:40:15
【问题描述】：

当有人访问锚链接时，我正在尝试制作滚动动画，如下所示：

www.miweb.com/section/#anchorLink

我正在使用此代码执行此操作，但其中有问题，因为如果用户访问 URL 没有锚 ID。

$('html, body').animate({
    scrollTop:$('[name="'+window.location.hash.replace("#", "")+'"]').offset().top
}, 500);

alert("the end");

如果用户从一个带有anchor ID的URL访问，它将被执行。

在任何情况下，我该如何在这个函数之后执行代码？

谢谢。

【问题讨论】：

你确定你有一个name属性为的元素吗？
这是一个例子 :) 但是，是的，我有它。真正的锚链接只是一个数字和 ID。然后我的代码中有无论如何，它运行良好，但它只是停止执行位于该代码之后的东西。

标签： javascript jquery scroll jquery-animate scrolltop

【解决方案1】：

如果您想要在动画之后执行代码，请执行以下操作：

$('html, body').animate({
    scrollTop:$('[name="'+window.location.hash.replace("#", "")+'"]').offset().top
}, 500, function() {
    alert("the end");
});

更新：
在 OP 的 cmets 之后，我认为当 offset() 为 null 时访问 top 属性时出现 javascript 错误（当没有锚时就是这种情况），所以你要防止访问可能的 null 引用，如下所示：

dest = $('[name="'+window.location.hash.replace("#", "")+'"]').offset();
dtop = dest != null ? dest.top : null;
$('html, body').animate({
    scrollTop: dtop
}, 500);

alert("the end");

现在alert() 应该可以正常打印了。

如果您查看浏览器 javascript 控制台，您以后可以很容易地发现类似的错误，我刚刚这样做并看到了有关空引用的错误。

【讨论】：

这不是我真正想要的。我只想能够在这之后仍然编写代码。现在，我不能，因为我写的代码就像它不存在一样。甚至只是一个“警报”。
在这种情况下，您需要发布完整的代码，以便我们看到您正在执行该 alert() 的周围代码，并告诉您出了什么问题。
好的，现在我明白了。我在它之后写的东西只有在使用锚 ID 访问页面后才会执行。如果 URL 上没有锚 id，则不会启动警报。我该怎么做才能解决这个问题？谢谢。
想一想您希望在什么情况下执行您的 alert()。如果没有看到您的代码，我们无法告诉您更多信息，您可以将代码粘贴到 pastie.org 并将链接放在这里.
没有更多代码了。应始终执行警报。在 URL 处带有或不带有锚点。动画一旦发生，什么时候因为没有锚而不能发生。