如何在页面加载时防止因URL中存在锚点而发生页面“跳转”？

Question

如何使用jQuery防止默认浏览器行为，即在页面加载时跳转到锚点，如果锚点在链接中？

var myLink = document.location.toString();

if (myLink.match('#')) {
 $('html, body').animate({ scrollTop: 0 }, 0); // OR
 $(window).scrollTop();
}

或者...找不到解决方案...搜索了...又搜索了。

- Bobo

---

你在寻找插件吗？这里有一个：http://jesseprice.com/jquery-slide-to-plugin/ - Nic

@melee 不需要，只需要一行代码来防止跳转，如果链接中存在锚点。 - Bobo

这是jQuery文档中关于event.preventDefault()方法的翻译：event.preventDefault() 方法阻止事件的默认行为。如果事件可以被取消，则取消事件，但不会停止事件冒泡。该方法只能在事件处理程序函数中使用。原始英文文档链接：http://api.jquery.com/event.preventDefault/ - Roko C. Buljan

@roXon 没有事件，页面正在加载。 - Bobo

@Bobo 哦，好的，对不起，我误解了。 - Nic

Answer 1

在您的链接上使用return false / event.preventDefault

var myLink = document.location.toString();

if (myLink.match('#')) {
    $('html, body').animate({ scrollTop: 0 }, 0); // OR
    $(window).scrollTop();
    return false;
}

你是指你想要平滑滚动到哈希符号中引用的ID位置吗？

阅读完您的评论后，请忽略此消息。

可能像这样：http://jsbin.com/ajafor/4#hello

- voigtan

---

是的，你想要在加载时读取它，而不是在单击事件上，我会研究一下 :) - voigtan

添加了一个示例：http://jsbin.com/ajafor/4#hello，您可以在scrollTo上使用数字，并且我在窗口上使用了onload事件，可能不需要，但它似乎有效。 - voigtan

也许不是最优雅的解决方案，但它能够工作 :) 经过几个小时的搜索和测试，这个是最好的...谢谢 :) - Bobo

Answer 2

<a href="#" class="link">link Text</a>
$(function()
{
    $('a.link').attr('href','javascript:void(0);')
});

或者手动添加

<a href="javascript:void(0);" class="link">link Text</a>

- Sanooj

---

我的意思是页面加载时，而不是onClick。 - Bobo

Answer 3

我通过包含localScroll和scrollTo来实现这一点，然后只需调用：

$(function () { $.localScroll(); });

- Jordan Wallwork

---

抱歉，我刚刚重新阅读了你的问题，意识到我实际上并没有回答你所问的问题。但我希望这些建议对你有所帮助。 - Jordan Wallwork