Créez des liens en ligne sans utiliser d'éléments d'ancrage : un guide étape par étape

Question

Comment créer un lien en ligne vers une cible sans élément d'ancrage ?

Je souhaite référencer une partie spécifique de la page cible. Mais comme je ne suis pas le propriétaire de cette page cible, je ne peux pas y définir l'élément d'ancrage.

Answer 1

Je ne sais pas si cela répond à votre question. J'ai créé un élément en ligne qui fait défiler la page jusqu'à un élément spécifique sans balise d'ancrage. S'il vous plaît dites-moi si c'est ce que vous recherchez.

/* JAVASCRIPT */

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

/* CSS */

span { cursor:pointer; }

Link

Answer 2

Vous pouvez utiliser la fonction du navigateur URL pour faire défiler jusqu'à l'extrait de texte . Chrome et Safari le prennent en charge, mais malheureusement Firefox ou les anciennes versions de navigateur ne le font pas : https://caniuse.com/url-scroll-to-text-fragment

Vous ajoutez simplement l'extrait #:~:text=Search à votre URL.

Exemple : en.wikipedia.org/wiki/Hyperlink#:~:text=link%20destination

Conseils :

• Votre application web ne doit pas encoder le caractère #:~:. Mais veuillez noter : si vous utilisez la saisie utilisateur pour créer des URL, ne désactivez pas le codage d'URL pour les URL complètes. Parce que l’encodage est une fonctionnalité de sécurité pour empêcher XSS.
• Je n'ai donc pas fourni le vrai lien dans la réponse car ce lien ne fonctionne pas ici car ~ est codé par stackoverflow. Il suffit donc de copier et coller le lien pour voir comment cela fonctionne.