在 Chrome 中捲動後如何返回指定錨點？

Question

如果我載入帶有命名錨點的 URL（例如這個），Chrome 將我直接帶到包含錨點的頁面部分。到目前為止，一切都很好。

但如果我滾動一下，我可能會忘記錨點在哪裡。我怎樣才能返回指定的錨點？

我嘗試刷新頁面，但 Chrome 沒有讓我回到錨點。我嘗試過強制刷新（Ctrl-F5），但沒有效果。我還嘗試按 Ctrl-L（選擇網址列），然後按 ENTER 重新載入頁面。

我的解決方法是關閉該選項卡，然後使用完整 URL 再次開啟新分頁。這對於閱讀大量規範文件的人來說是相當煩人的！有沒有更好的辦法？

Answer 1

您只需執行一些 JavaScript 即可將元素捲動到視圖頂部：

document.getElementById(location.hash.slice(1)).scrollIntoView()

來源：javascript - 如何滾動 HTML 頁面到給定的錨點？ - 堆疊溢位

為了方便起見，可以將其添加為書籤欄上的書籤，或者為其定義一個鍵盤快速鍵。

javascript:document.getElementById(location.hash.slice(1)).scrollIntoView()

當 URL 中沒有雜湊值時，會導致（無提示）JavaScript 錯誤。要捲動到頁面頂部，請使用

(document.getElementById(location.hash.slice(1))||document.body).scrollIntoView()

Answer 2

使用此書籤：

javascript: var h = location.hash ; location.hash = "" ; location.hash = h ; null

解釋：

• 設定location.hash將使頁面捲動到該錨點。
• 作為特殊情況，設定location.hash為本身是一個空操作。
• 它做但是，如果我們將其設定為滾動別的東西然後立即恢復到原來的值。
• 最後，小書籤必須將null/undefined作為其最終值，或（由於歷史原因）它們用其最終值替換頁面正文。

---

【以下內容僅供「加分」】

或者，我們可以按照 user202729 的答案做一些事情。他的答案僅適用於由 形成的錨<a id="foo">。它們不能與使用 的錨點一起使用<a name="foo">，例如在 SU/SO/SE 上使用的錨點！我們可以捕獲這些（可能是誤報——我沒有太多地探索這種方法）

javascript: var h = location.hash.slice(1) ; (document.getElementById(h) || document.getElementsByName(h)[0] || document.body).scrollIntoView()

然而，即使這種方法在像 github.com 這樣使用<a class="anchor" href="#foo">. AFAICT，該方法是非標準的，需要自訂 JavaScript。我上面的初始方法適用於所有三種錨定樣式。

ps 我喜歡來自 SE 的想法的協作。閱讀 user202729 的答案以及 Dean Harding 的答案如何將 HTML 頁面捲動到給定的錨點？給了我實驗所需的想法，並透過我的方式找到答案。

Answer 3

為了補充@Noach 的解決方案，我想添加有關如何創建小書籤的資訊。小書籤是執行 JavaScript 而不是開啟網頁的瀏覽器書籤。

不幸的是，由於語法限制，無法在 superuser.com 中建立書籤連結。所以需要手動新增。

要在 Chromium 中新增小書籤，您可以右鍵單擊書籤欄，然後按一下「新增頁面...」。
或者，您可以轉到書籤管理器，然後右鍵單擊並單擊“新增書籤”：

在「名稱」欄位中貼上re-anchor.您將在書籤欄中看到此文字。
在「URL」欄位中貼上javascript: var h = location.hash ; location.hash = "" ; location.hash = h ; null

然後將新建立的書籤放在欄中的某個位置，以便您可以在需要時單擊它。