內容目錄點了卻跑回頁首,最後關掉平滑捲動
整理日期:2026-08-10
文章的內容目錄看起來正常,點擊後網址也會出現對應的 #ID,但頁面不是停在標題,而是往頁面上方跑。
直接把同一個 #ID 加在網址後面又能正常跳轉。這表示標題 ID 沒壞,問題出在點擊目錄後執行的程式。
先拆成幾層看
Section titled “先拆成幾層看”- 先比對目錄連結的
href和標題的id,兩邊必須完全相同。 - 如果網址雜湊值正確,位置卻不對,再停用外掛的平滑捲動測一次。
- 查看前台 HTML,確認平滑捲動程式要找的 class 或資料屬性是否真的存在。
這次有兩層問題。
第一層是文章標題已經有手動設定的英文 ID,目錄外掛一開始卻仍用標題文字產生連結。把兩邊調整成同一個 ID 後,網址已經正確,但點擊仍會往上跑。
第二層才是根本原因。外掛的平滑捲動只會尋找它自己加入的標記,目前頁面輸出的標題沒有這個標記。程式找不到目標後,捲動位置保留在預設值 0,結果就是回到頁面上方。
直接輸入含有 #ID 的網址不會經過這段平滑捲動,所以反而能正常跳轉。
先在內容目錄外掛中關閉平滑捲動,並保留連結的 href。讓瀏覽器用原生錨點處理,不需要再補一段 JavaScript。
如果網站有固定頁首,標題跳轉後可能被遮住。可以替文章內的標題預留上方空間:
/* 內容目錄錨點位置調整 */.entry-content :is(h2, h3, h4, h5, h6)[id] { scroll-margin-top: 120px;}120px 不是固定答案,要依網站實際的頁首高度調整。
不建議先做的事
Section titled “不建議先做的事”- 不要看到頁面往上跑,就先把文章裡所有英文 ID 改成中文。
- 不要只確認網址有沒有出現
#ID,還要比對目標元素是否存在。 - 平滑捲動已經跟頁面結構不相容時,不要再疊另一段捲動 JavaScript。
- 不要勾選移除
href的設定,否則會連瀏覽器原生錨點也一起拿掉。
下次遇到可以先整理什麼
Section titled “下次遇到可以先整理什麼”- 目錄連結實際輸出的
href。 - 對應標題實際輸出的
id。 - 直接開啟含有
#ID的網址能不能正常跳轉。 - 關閉平滑捲動後,點擊目錄是否恢復正常。
- 固定頁首的實際高度。
WordPress內容目錄錨點平滑捲動CSS