javascript - 页面跳转-无法阻止

Question

我正在使用 HTML 页面为 Flash 应用程序制作模型 - 我正在使用 HTML 页面在浏览器中演示它，而且它逐像素看起来更好，并且我在某些页面上使用 jQuery 来实现丰富的动画.

我正在使用正常<a>用于在 HTML 页面中导航的按钮的标签。

但是，如果我向下滚动页面一半并单击页面底部的按钮 - 当它转到下一个 HTML 页面时，它会跳回页面顶部 - 这显然会发生。

是否有任何 JavaScript 或技巧可以阻止所有 <a>浏览我的 HTML 页面时，标签不会跳转到页面顶部。或者更好，如果我可以给我的<a>标记一个类，这样它就不会干扰我的 jQuery 动画 - 因为有些使用 <a>标签。

我的html页面是这样的:

page-1.html
page-2.html
page-3.html
page-4.html
page-5.html

我实际上并没有使用 jQuery 或 JavaScript 来浏览我的页面，因此当它从 page-1.html 跳转到 page-2.html 时 - 它总是跳到顶部。

我的<a>标签使用完整的 href 的 <a href="page-2.html" class="stop-jumping" title="Page 2"><img ... /></a>

我正在寻找要包含在 head 中的内容使用 <a> 导航时阻止我的页面移动每个 HTML 页面的标签。

Answer 1

我假设您的 a 标记没有正确的 href 属性，而您只是将 "#" 放入其中(这是不好的从语义和可用性的 Angular 来看)。

您的浏览器认为您正在单击某个 anchor ，尝试在 DOM 中查找它，但失败，然后将您带回页面顶部。

避免这种情况的方法是在 a 标记的点击事件上绑定(bind)一个函数并调用 preventDefault()

$("a").click(function(event) {
  event.preventDefault();
}

参见the jQuery doc.

<小时/>

由于对问题进行了大量修改而进行编辑

您需要使用 HTML anchor 。在每个 html 页面上，为您希望用户屏幕对齐的元素提供一个 id。

<h1 id="the_place">The user screen will be aligned to this element</h1>

在每个指向另一个页面的链接上，在 href 属性末尾添加 #the_place

<a href="/page-2.html#the_place">Go to page 2</a>

应该可以了=)。