Erstellen Sie Inline-Links ohne Ankerelemente: eine Schritt-für-Schritt-Anleitung

Question

Wie erstelle ich einen Inline-Link zu einem Ziel ohne Ankerelement?

Ich möchte auf einen bestimmten Teil der Zielseite verweisen. Da ich aber nicht der Eigentümer dieser Zielseite bin, kann ich das Ankerelement dort nicht setzen.

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%20destination

提示：

• 您的 Web 应用程序不得对字符 #:~: 进行编码。 但请注意：如果您使用用户输入来构建 url，请勿禁用完整 url 的 url 编码。因为编码是一种防止 XSS 的安全功能。
• 因此，我没有在答案中提供真正的链接，因为该链接在这里不起作用，因为 ~ 是由 stackoverflow 编码的。因此，只需复制并粘贴链接即可查看其工作原理。