建立頁面跳轉

頁面跳轉也稱為錨點連結或跳轉連結，只要按下該連結，你就會立即前往較長頁面的上方或下方某處。右側目錄就是頁面跳轉的範例。

頁面跳轉是連結至頁面區段的絕佳方式。網站訪客可以按下該連結，從較長頁面的某處前往同一頁面的另一處。

舉例來說，假設你在頁面頂端有一份區段名稱清單。你可以將每個名稱連結至頁面下方相關的區段，如此訪客能跳轉至他們感興趣的特定資訊區段。接著你可以直接將讀者連結回頁面開頭所有區段的原始清單。

此影片使用英文字幕。
YouTube 提供自動翻譯功能，讓你可以用自己的語言觀看：

開啟自動翻譯字幕的方法：

1. 播放影片。
2. 點擊影片右下角的 ⚙️ 設定 圖示。
3. 選擇 字幕/副本。
4. 選擇 自動翻譯。
5. 從清單中選擇你的偏好語言。

使用自動配音（測試版）的方法：

1. 點擊 ⚙️ 設定 圖示。
2. 選擇 音訊曲目。
3. 選擇你想收聽的語言：

ℹ️ 翻譯與配音由 Google 自動產生，可能不夠精確，且自動配音功能仍在測試階段，暫未向所有語言開放。

第一步是選取你希望讀者在按一下頁面跳轉時要到達的區段。若要執行此操作，我們可以在你想要的跳轉目標區塊上建立所謂的「錨點」。

1. 按一下要將錨點新增至其中的區塊。許多常見的區塊都支援錨點，包括「段落」、「標題」、「圖片」、「欄」和「按鈕」。
2. 檢視右側邊欄中的區塊設定。如果右側未顯示側邊欄，按一下右上角的「設定」圖示叫出設定。此圖示外觀為正方形中有寬度不相等的兩個欄：

3. 在區塊設定的底部，按一下「進階」。
4. 在「HTML 錨點」方塊中輸入文字。這會成為錨點。請務必使用不重複的文字，該文字尚未作為頁面其他處的錨點。如果你想要使用不只一個字，系統會在字詞之間自動插入連字號 (-)，如下所示：two-words：

接下來，我們將自行建立頁面跳轉連結。訪客會按一下此連結，到達你在步驟 1 中建立的區段。

1. 輸入一些文字，或新增讓讀者能夠按一下的圖片、按鈕，或導覽選單項目。
2. 選取文字/圖片/按鈕/選單項目，然後按一下區塊工具列中的連結選項。連結選項是一個圖示，看起來像鏈條的實際連結，如此處的特別標示：
   
3. 輸入你在步驟 1 建立的 HTML 錨點，開頭為主題標籤 (#) 符號。舉例來說，如果你想要建立名稱為「create-a-page-jump」的錨點，請將連結輸入為「#create-a-page-jump」
4. 按一下編輯器右上角的「儲存/更新/發佈」，以儲存變更。

大功告成！你現在可以在公開頁面測試連結，以確認你在步驟 2 中建立的連結會引導你前往在步驟 1 中建立的錨點。請注意，頁面跳轉連結無法在預覽頁面或文章時運作，因此請在已發佈的版本上進行測試。

你可以從導覽選單建立頁面跳轉，其會連結到頁面的特定部分。這通常適用於以下網站：擁有需要長時間滾動的首頁。頁面跳轉可讓訪客更輕鬆地檢視他們想要的首頁區段。

1. 第一步是建立錨點，作為跳轉的目標位置。
2. 在選單中新增項目，該項目也是自訂連結。
3. 在「文字」欄位中，撰寫任何你想要稱呼選單項目的文字。這不會影響頁面跳轉。
4. 在「URL」欄位，在錨點前面加上主題標籤 (#) 符號。

請記住，像 #my-anchor 的頁面跳轉功能只能在錨點所在的相同頁面運作。如果你想要跳至不同頁面的區段，請參閱這份指引的下一區段。

頁面跳轉並非僅用於連結至同一頁面的不同區段。你可以使用頁面跳轉，從某個頁面連結到其他頁面中的特定區域。

不同之處在於我們不會只連結至錨點 (例如我們在上方步驟 2 中以 #create-a-page-jump 撰寫連結的方式)，而是會連結至加上錨點的完整頁面 URL。

例如，如果頁面具有下列 URL：

https://yourgroovydomain.com/example/

然後在該頁面建立名為 unique-identifier 的錨點，則完整跳轉連結將是：

https://yourgroovydomain.com/example/#unique-identifier

若要建立回到頁面頂端的跳轉連結：

1. 在頁面開頭的區塊中新增錨點。
2. 在頁面下方輸入一些文字，例如「回到頂端」或「跳到開頭」。
3. 將文字連結至錨點。