Vous utilisez un navigateur obsolète, veuillez le mettre à jour.
Veuillez utiliser un navigateur internet moderne avec JavaScript activé pour naviguer sur OpenClassrooms.com
Une question ? Pas de panique, on va vous aider !
Ce sujet est fermé.
Bonjour.
Je charge des pages dans un container (<section>) avec un loader ajax.
ça fonctionne très bien mais je n'arrive pas à atteindre l'ancre qui va avec l'url
genre: page.html#_idTextAnchor008
Je sèche salement.
monContainer.scrollTop = document.querySelector(ancre).offsetTop;
ne fonctionne pas
la console me renvoie une valeur pour le offsetTop (donc il le trouve)
Je n'utilise pas jQuery !!!
Une idée?
merci
je vous laisse le code pour la bonne bouche
function chargeChapitre(_url) { const ancre = '#'+_url.split('#')[1]; const con = document.querySelector('#main-content'); if (pageEncours != _url.split("#")[0]) { console.log(`chargeChapitre("${_url}")`,_url.split('#')[1]); // cache le container let xhr = new XMLHttpRequest(); xhr.onreadystatechange = function (e) { if (xhr.readyState == 4 && xhr.status == 200) { con.innerHTML = xhr.responseText; pageEncours = _url.split("#")[0] } } xhr.onload = function (e) { console.log(e.status); if (xhr.readyState == 4 && xhr.status == 200) { console.log("chargé"); // va à l'ancre console.log('offsetTop',document.querySelector(ancre).offsetTop); con.scrollTop = document.querySelector(ancre).offsetTop; //console.log(`transition ${con.style.transitionDuration}, ${con.style.transitionDelay}`); } if (xhr.status == 404) { console.log ("le fichier n'est pas trouvable"); } } xhr.open("GET", _url, true); xhr.setRequestHeader('Content-type', 'text/html'); xhr.send(); urlEncours = _url; } else { console.log("meme page"); if (urlEncours != _url) { console.log('offsetTop',document.querySelector(ancre).offsetTop); con.scrollTop = document.querySelector(ancre).offsetTop; } else { //même url + meme ancre } } }
-Edité par mrbbp 16 janvier 2019 à 19:37:16
<a href="#ton-ancre">Lien</a>
Salut NuageZen,
je charge la page depuis un sommaire qui est lui-même chargé dans une div...
donc ça marche pas.
La solution compliquée est que je n'appelle pas le bon container pour le scrollTo, je dois appeler le parent...
?