5473 sujets

Sémantique web et HTML

Bonjour,

J'ai un site web avec un sommaire et différents chapitres.

J'utilise les balises <a id=#SOM-XX" href="#XX"> et <a id="XX" href="#SOM-XX"> pour permettre aux utilisateurs de faire le va-et-vient entre les titres du sommaire et les chapitres et sous-chapitres. Jusqu'à il y a peu cela fonctionnait bien.

Depuis une date indéterminée, sur Firefox, après un premier va-et-vien entre sommaire et chapitres, les liens depuis le sommaire ne renvoient pas exactement au chapitre concerné, mais légèrement plus haut... Smiley rolleyes
Le phénomène s'amplifie à mesure que l'on choisit un chapitre proche de la fin, par exemple le 5e.

Essayez par vous-mêmes: https://blog.patrick-kiri.mq/2019/02/connaissances-et-orientations-patrick_15.html#lapasfc

En revanche, tout fonctionne normalement sur Chrome.

Comment corriger ce problème ?
Modérateur
Salut,

de mon côté, je n'ai pas ce souci.

os/distribution : SLED
bureau : Gnome 3.34
firefox : 102esr
Modifié par niuxe (07 Dec 2022 - 14:42)
De mon côté le problème se pose sur:
- Windows 10, Firefox 107.0.1
- Android 8.1.0, Firefox 107.2.0

Smiley confus
Modérateur
Là, je suis passé sur mon win10. En effet, tu as bien un souci.

Peux tu me dire comment est géré ton système ? Il y a du JS ? C'est quoi ? Une librairie téléchargée ou un script que tu as fait ?
Exact, j'ai aussi ce problème, que j'ai abandonné à tenter de résoudre. J'en avais parlé ici il y a quelques mois.
Je ne sais pas si le layzyload natif de certains navigateurs apporte le même genre de problème.
niuxe a écrit :
Là, je suis passé sur mon win10. En effet, tu as bien un souci.

Peux tu me dire comment est géré ton système ? Il y a du JS ? C'est quoi ? Une librairie téléchargée ou un script que tu as fait ?


Bonjour et merci pour ton aide. C'est un blog Blogger avec le template "Notable" il me semble.
Alors j'ai réussi à régler le problème en combinant le comportement normal (d'où le " //e.preventDefault(); ") avec du javascript; ça fonctionne sur Firefox/Chrome Windows/Android 8; si vous pouviez me faire des retour sur les autres plateformes Smiley ravi

Les autres lignes en commentaire ne règlent pas le problème.



(() => {
  document.querySelectorAll('a[href^="#"]').forEach((elem) => {
    elem.addEventListener('click', (e) => {
      //e.preventDefault();          
      // location.href = elem.getAttribute('href');
      
      var h = elem.getAttribute('href').replace('#', '');
         
      //var top = document.getElementById(h).offsetTop; //Getting Y of target element
      //window.scrollTo(0, top); 

      document.getElementById(h).scrollIntoView(); 

    });
  });
})()
 


https://stackoverflow.com/questions/68467475/lazy-loading-conflicting-with-scrollto-anchor-to-id-scroll-stops-halfway-throu
https://stackoverflow.com/questions/13735912/anchor-jumping-by-using-javascript
Modifié par negtrick (08 Dec 2022 - 17:18)
Meilleure solution