Create inline links without using anchor elements: a step-by-step guide

Question

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

I want to reference a specific part of the target page. But since I'm not the owner of that target page, I can't set the anchor element there.

Answer 1

I'm not sure this answers your question. I have created an inline element that scrolls the page to a specific element without an anchor tag. Please tell me if this is what you are looking for.

/* JAVASCRIPT */

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

/* CSS */

span { cursor:pointer; }

Link

Answer 2

You can use the browser function URL to scroll to a text fragment . chrome and safari support it, but unfortunately firefox or older browser versions don't: https://caniuse.com/url-scroll-to-text-fragment

You just need to add the #:~:text=Search fragment to your URL.

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

hint:

• Your web application must not encode the characters #:~:. But please note: if you are using user input to build URLs, do not disable URL encoding for full URLs. Because encoding is a security feature to prevent XSS.
• So I didn't provide the real link in the answer because that link doesn't work here since ~ is encoded by stackoverflow. So just copy and paste the link to see how it works.