How can I create an inline link to a target without having an anchor element?

I want to reference a specific section in a target page. But because I'm not the owner of that target page, I'm not able to set an anchor element there.

CodePudding user response：

You can use the browser feature URL Scroll-To-Text Fragment. It's supported by chrome and safari, but unfortunately it's not supported by firefox or old browser versions: https://caniuse.com/url-scroll-to-text-fragment

You just have to add #:~:text=Search Fragment to your url.

Example: en.wikipedia.org/wiki/Hyperlink#:~:text=link destination

Hints:

• The characters #:~: must not be encoded by your web application. But beware: Do not disable the url encoding for the full url, if you use user input to build the url. Because the encoding is a security feature to prevent XSS.
• Therefore I don't provide a real link in my answer, because this link is not working here, as ~ is encoded by stackoverflow. So just copy and paste the link to see it working.

CodePudding user response：

I don't know of this answers your question. I've created an inline element that scrolls the page to a specific element without the anchor tag. Please let me know if this is what you're looking for.

/* JAVASCRIPT */

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

/* CSS */

span { cursor:pointer; }

<!-- HTML -->

<span onclick="goTo()">Link</span>