不使用錨元素建立內聯連結：逐步指南

Question

如何在沒有錨元素的情況下建立指向目標的內聯連結？

我想引用目標頁面中的特定部分。但因為我不是該目標頁面的擁有者，所以我無法在那裡設定錨元素。

Answer 1

我不知道這能回答你的問題。我創建了一個內聯元素，它將頁面滾動到沒有錨標記的特定元素。請告訴我這是否是您正在尋找的內容。

/* JAVASCRIPT */

function goTo() {      
  const targetElement = document.querySelector('#target')
  window.scroll(0, targetElement)
}

/* CSS */

span { cursor:pointer; }

Link

Answer 2

您可以使用瀏覽器功能URL 捲動到文字片段。 chrome 和 safari 支援它，但不幸的是，firefox 或舊瀏覽器版本不支援它： https ://caniuse.com/url-scroll-to-text-fragment

#您只需將 #:~:text=Search 片段新增到您的網址即可。

範例： en.wikipedia.org/wiki/Hyperlink#:~:text=link destination

提示：

• 您的 Web 應用程式不得對字元 #:~: 進行編碼。 但請注意：如果您使用使用者輸入來建立 url，請勿停用完整 url 的 url 編碼。因為編碼是一種防止 XSS 的安全功能。
• 因此，我沒有在答案中提供真正的鏈接，因為該鏈接在這裡不起作用，因為 ~ 是由 stackoverflow 編碼的。因此，只需複製並貼上連結即可查看其工作原理。