沒有滾動或跳轉的 HTML 錨鏈接

Question

我有各種鏈接，它們都有唯一的“偽錨”ID。 我希望它們影響 url 哈希值，並且點擊魔術全部由一些 mootools 代碼處理。 但是，當我點擊鏈接時，它們會滾動到自己（或在一種情況下滾動到頂部）。 我不想在任何地方滾動，但也需要我的 javascript 來執行並在 url 更新中擁有哈希值。

模擬示例代碼：

<a href="#button1" id="button1">button 1</a>
<a href="#button2" id="button2">button 2</a>
<a href="#" id="reset">Home</a>

因此，如果您要單擊“按鈕 1”鏈接，則 url 可能是http://example.com/foo.php#button1

有沒有人對此有任何想法？ 簡單地讓一些 javascript return void 殺死滾動但也會殺死我的 javascript（盡管我可能可以通過 onclick 解決這個問題）但更重要的是，防止 url 中的哈希值發生變化。

Answer 1

錨鏈接的全部意義在於將頁面滾動到特定點。 因此，如果您不想發生這種情況，則需要附加一個onclick處理程序並返回 false。 即使只是將其添加為屬性也應該有效：

<a href="#button1" id="button1" onclick="return false">button 1</a>

上面的一個副作用是 URL 本身不會改變，因為返回 false 將取消事件。 因此，由於您希望 URL 實際更改，您可以將window.location.hash變量設置為您想要的值（這是 URL 的唯一屬性，您可以在不強制瀏覽器重新加載的情況下更改該屬性）。 您可能可以附加一個事件處理程序並調用window.location.hash = this.id類的東西，盡管我不確定 mootools 如何處理事件。

（此外，您還需要所有 ID 都是唯一的）

Answer 2

您可以使用下面的代碼來避免滾動：

<a href="javascript:void(0);">linktxt</a>

Answer 3

我可能遺漏了一些東西，但為什么不給他們不同的 ID？

<a href="#button1" id="button-1">button 1</a>
<a href="#button2" id="button-2">button 2</a>
<a href="#" id="reset">Home</a>

或者你喜歡的任何約定。

Answer 4

此外， preventDefault

    $(your-selector).click(function (event) {
        event.preventDefault();
        //rest of your code here
    }

Answer 5

我找到了解決方案。 在這里，我通過調用 href 保存舊位置並在滾動后恢復它

<script language="JavaScript" type="text/javascript">
<!--
function keepLocation(oldOffset) {
  if (window.pageYOffset!= null){
    st=oldOffset;
  }
  if (document.body.scrollWidth!= null){
    st=oldOffset;
  }
  setTimeout('window.scrollTo(0,st)',10);
}
//-->
</script>

並在頁面正文中

<a href="#tab1" onclick="keepLocation(window.pageYOffset);" >Item</a> 

感謝站點點

Answer 6

更簡單的方法可能是將其添加為 GET。 也就是說， http://example.com/foo.php?q=#button1 : http://example.com/foo.php#button1 http://example.com/foo.php?q=#button1而不是http://example.com/foo.php#button1

這不會對頁面的顯示方式產生任何影響（除非您希望這樣做），並且大多數腳本語言已經擁有可以輕松（且安全地）讀取數據的工具。

Answer 7

好吧，這個答案發布 7 年后，我找到了一種不同的方法來使它工作：只需將 window.location.hash 指向一個不存在的錨點！ 它不適用於<a> s，但在<div> s 中完美運行。

<div onclick="window.location.hash = '#NonExistentAnchor';">button 1</div>

在 Chrome 56、Firefox 52 和 Edge (IE?) 38 中運行良好。另一個好處是這不會產生任何控制台錯誤或警告。

希望對我以外的人有幫助。

Answer 8

有一個完全沒有任何 JavaScript 的解決方案：

<a href="#!">I will not jump to the top</a>