雜談：終於修好了Blog的目次功能 / TALK: Finally Fixed the Table of Contents Function
沒想到是因為錨點位置不能用在CSS樣式為「position: absolute;」元素上。
自動目次功能 / Automatic Table of Contents
「布丁布丁吃什麼？」使用了jQuery動態分析文章內的標題並產生目次。自動目次功能會為每個標題加上一個專屬於它的「錨點」(anchor)，讓大家可以方便用這個錨點跳轉到頁面中的特定位置。
理想上是這樣子啦，但這個自動目次功能一直有各種問題。
新增自動跳轉到標題的功能 / Add the Function of Automatic Jump to the Heading
帶有錨點的網址會帶有「#」(hash)的內容，而「#」之後的代號則是各個標題的錨點。舉例來說，帶有錨點的網址可能如下所示：
https://blog.pulipuli.info/2023/07/apa-should-it-be-italic-or-bold-in-apa-style.html#postcata_2023_07_apa-should-it-be-italic-or-bold-in-apa-style.html0_anchor0一般來說，瀏覽器會根據hash後面的代號，找尋網頁中有該代號的元素(也就是錨點)，然後將網頁的捲軸自動捲到該位置。但由於我的做法是在網頁載入之後才動態產生目次跟對應的錨點，這使得網頁剛開始讀取的時候，瀏覽器是找不到對應的錨點，導致網頁不會自動跳轉到特定的標題，喪失了自動目次的功能。
現在我在設定好自動目次之後再加入跳轉的功能，解決了這個問題。
跳轉之後排版被影響的問題 / The Problem of Subsequent Page Rendering Being Affected After Jumping
然後另一個問題則是困擾我非常久的事情。跳轉到特定標題之後，整個版面都挪了一個位置。這到底是為什麼呢？
幾經研究之後，我發現根本的原因在於我設為錨點的元素，它的CSS屬性被設了「position: absolute;」。這個設定導致瀏覽器要捲動到該元素的時候，會對該元素上層元素的版面造成奇怪的影響，例如上圖中包裹錨點的上層元素，它的寬度就被強行拉大，造成本來左邊應該要有的間隔消失了。
將「position: absolute; 」改為「position: relative;」就能解決這個問題。
沒想到問題會出在這麼小的地方。你覺得呢？有什麼看法的話，歡迎在下面留言喔！
