頁面跳轉-無法停止

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;
}

這將破壞標准的標簽事件