跳到內容

內容目錄點了卻跑回頁首,最後關掉平滑捲動

整理日期:2026-08-10

文章的內容目錄看起來正常,點擊後網址也會出現對應的 #ID,但頁面不是停在標題,而是往頁面上方跑。

直接把同一個 #ID 加在網址後面又能正常跳轉。這表示標題 ID 沒壞,問題出在點擊目錄後執行的程式。


  • 先比對目錄連結的 href 和標題的 id,兩邊必須完全相同。
  • 如果網址雜湊值正確,位置卻不對,再停用外掛的平滑捲動測一次。
  • 查看前台 HTML,確認平滑捲動程式要找的 class 或資料屬性是否真的存在。

這次有兩層問題。

第一層是文章標題已經有手動設定的英文 ID,目錄外掛一開始卻仍用標題文字產生連結。把兩邊調整成同一個 ID 後,網址已經正確,但點擊仍會往上跑。

第二層才是根本原因。外掛的平滑捲動只會尋找它自己加入的標記,目前頁面輸出的標題沒有這個標記。程式找不到目標後,捲動位置保留在預設值 0,結果就是回到頁面上方。

直接輸入含有 #ID 的網址不會經過這段平滑捲動,所以反而能正常跳轉。


先在內容目錄外掛中關閉平滑捲動,並保留連結的 href。讓瀏覽器用原生錨點處理,不需要再補一段 JavaScript。

如果網站有固定頁首,標題跳轉後可能被遮住。可以替文章內的標題預留上方空間:

/* 內容目錄錨點位置調整 */
.entry-content :is(h2, h3, h4, h5, h6)[id] {
scroll-margin-top: 120px;
}

120px 不是固定答案,要依網站實際的頁首高度調整。


  • 不要看到頁面往上跑,就先把文章裡所有英文 ID 改成中文。
  • 不要只確認網址有沒有出現 #ID,還要比對目標元素是否存在。
  • 平滑捲動已經跟頁面結構不相容時,不要再疊另一段捲動 JavaScript。
  • 不要勾選移除 href 的設定,否則會連瀏覽器原生錨點也一起拿掉。

  • 目錄連結實際輸出的 href
  • 對應標題實際輸出的 id
  • 直接開啟含有 #ID 的網址能不能正常跳轉。
  • 關閉平滑捲動後,點擊目錄是否恢復正常。
  • 固定頁首的實際高度。

  • WordPress
  • 內容目錄
  • 錨點
  • 平滑捲動
  • CSS