页面跳转-无法停止

Question

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

我在按钮上使用普通的<a>标签，这些标签可在HTML页面中导航。

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

浏览我的HTML页面时，是否有任何JavaScript或技巧可以阻止所有<a>标记跳至页面顶部。 甚至更好的是，如果我可以给我的<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>

我正在寻找要包含在每个HTML页面head ，以防止使用<a>标记导航时页面移动。

Answer 1

我假设您a标签没有适当的href属性，而您只是在其中添加了"#" （从语义和可用性的角度来看这很糟糕）。

您的浏览器认为您正在单击锚点，尝试在DOM中找到它，然后失败，然后将您带回到页面顶部。

避免的方法是一个功能绑定在你的点击事件a标签，并调用preventDefault()

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

由于对问题的大量修改而进行修改

您需要使用HTML锚点。 在每个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>

那应该做=）。

Answer 2

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

Answer 3

你可以用

return false

在处理导航或调用的函数末尾

e.preventDefault and e.stopPropagation

停止事件的正常行为（在您的情况下为锚点上的click事件）。

Answer 4

是，当您有点击事件时返回false

 $('a').click(function(){
    return false;
}

这将破坏标准的标签事件