Ancre vers un endroit précis, sur une autre page du même site

L'ancre est un outil de navigation complémentaire pour les pages verticales, ou pour renvoyer vers un article précis sur une autre page. (Exemple : page Bugg)

1) Créez une ancre sur la page visée :

(ici, je vise le bas de la page "Smooth-Scrolling"). Suivez ce tutoriel de Jimdo, qui explique comment réaliser un lien vers un autre endroit de la même page. Il vous conduit à placer, sur le lieu visé, une ancre : <a name="nomDeVotreAncre" id="nomDeVotreAncre"></a>

2) Puis, vous créez le lien vers l'ancre :

<a title="votre ancre" href="#nomDeVotreAncre" data-mce-href="#nomDeVotreAncre">Ancre : aller à "nomDeVotreAncre"</a>

Qui va ressembler à ceci en mode visiteur : Ancre : aller à "nomDeVotreAncre" sur la page SmoothScrolling

Vous placez ce lien sur la page d'où vous voulez venir.

3) Vous rajoutez quelques précisions :

- L'adresse complète de la page devant l'identifiant de l'ancre :

https://www.fredvig.com/astuces-et-tutoriels/ancre/smooth-scrolling/

- La commande qui permet d'ouvrir dans la même page navigateur :

target="_self"

Vous obtenez ceci :

<a title="https://www.fredvig.com/astuces-et-tutoriels/ancre/smooth-scrolling/#nomDeVotreAncre" target="_self" href="https://www.fredvig.com/astuces-et-tutoriels/ancre/smooth-scrolling/#nomDeVotreAncre">Ancre : aller à "nomDeVotreAncre" sur la page SmoothScrolling </a>

… Que vous collez dans un widget html, en stylant le contenu :

Ancre : aller à "nomDeVotreAncre" sur la page SmoothScrolling

4) Ancre à partir d'un bouton

Il est possible de réaliser une ancre vers une autre page du même site à partir d'un bouton, mais le lien s'ouvrira dans une nouvelle page. (la balise _self ne fonctionne pas dans ce cas). Collez dans l'onglet "lien externe" du bouton l'adresse complète : https://www.fredvig.com/astuces-tutos/smooth-scrolling/#nomDeVotreAncre

Vous obtenez ceci :

Smooth scrolling

5) Résolution d'un Bugg de Firefox

- Firefox renvoit bien à l'ancre, mais la page charge ensuite certains contenus, comme les galeries javascript, ce qui peut décaler la position ciblée.

Le javascript présent sur la page cible est susceptible de perturber le bon déroulement de la direction vers l'ancre.

Description du Bugg

- heureusement un script a été écrit par un développeur, pour contrer le problème.

Allez sur la page Cible (celle où se trouve l'ancre) et collez dans un widget html, en début de contenu, le script suivant :

<

script type="text/javascript"> /*fixer le problème des ancres dans firefox*/ //<![CDATA[ $(document).ready(function () { var anchor_id = window.location.hash; if (anchor_id != "") { var new_position = $(anchor_id).offset(); window.scrollTo(new_position.left,new_position.top); } }); //]]> </script

>

Cela devrait résoudre le bugg des ancres décalées.
Merci Frederic Mirrione qui a signalé ce bugg sur le forum Jimdo