11521 sujets

JavaScript, DOM et API Web HTML5

Atteindre une ancre (#id) dans une page chargée en ajax. SANSJQUERY

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.
Je n'ai pas d'erreur dans la console, donc j'en déduis que tout existe...
J'ai une valeur pour le offsetTop (qui change en fonction de mon ancre) mais je ne suis pas sûr d'utiliser la bonne méthode pour scroller jusqu'à cette ancre. ni scroller le bon container...
Mes ancres sont des id...

Je n'utilise pas jQuery !!!
Une idée?
merci

je vous laisse le code pour la bonne bouche
<div class="main">
	<div  id="swipeme-main" class="panel panel-main" ><section id="main-content"></section></div>
	<div class="panel panel-left" ><section id="left-content" ></section></div>
	<div class="panel panel-right"><section id="right-content"></section></div>
</div>


let menuOuvert, pageEncours, urlEncours;
function chargeChapitre(_url) {
    const ancre = '#'+_url.split('#')[1];
    const con = document.querySelector('#main-content');
    if (pageEncours != _url.split("#")[0]) {       
        // 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;
            }
            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
        }
    }
}

Modifié par mrbbp (17 Jan 2019 - 01:42)
Ok je réponds j'ai trouvé en posant bien ma question...
c'est le container parent qui slide (ça doit être mes magouilles avec ma css).
J'ai mis un écouteur de scroll sur #main-content et rien ne bouge, par contre sur le parent ça gigote.

donc en ciblant correctement les elements ça fonctionne.

document.querySelector('#swipeme-main').scrollTo(0,document.querySelector(ancre).offsetTop);


Merci MisterBbp
Modifié par mrbbp (17 Jan 2019 - 01:44)
Modérateur
Bonjour,

Il me semble que dans ton cas, le scroll doit s'appliquer à l'ensemble du document. Mais, on n'a pas assez d'information pour en être sûr ici.

Et si tel est le cas, pour scroller jusqu'à une ancre, on peut utiliser simplement :

location.hash = ancre; // on suppose que ancre commence par un #


Amicalement,
parsimonhi a écrit :
Il me semble que dans ton cas, le scroll doit s'appliquer à l'ensemble du document. Mais, on n'a pas assez d'information pour en être sûr ici.


comme sur le html: la page est composée de 3 containers (gauche/milieu/droite) qui sont chargés de 'pages'.
La page centrale avec ancre est chargée dans le #main-content, c'est pas le document complet qui bouge, sinon mes deux autres divs (#left et #right) bougeraient aussi (ils sont pas en 'fixed') et mon ascenseur serait à la droite de la fenêtre, là il est collé à mon #main...
merci en tout cas.
Modifié par mrbbp (17 Jan 2019 - 10:44)
mrbbp a écrit :
Bonjour.

Je charge des pages dans un container (&lt;section&gt;) 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.
Je n'ai pas d'erreur dans la console, donc j'en déduis que tout existe...
J'ai une valeur pour le offsetTop (qui change en fonction de mon ancre) mais je ne suis pas sûr d'utiliser la bonne méthode pour scroller jusqu'à cette ancre. ni scroller le bon container...
Mes ancres sont des id...

Je n'utilise pas jQuery !!!
Une idée?
merci

je vous laisse le code pour la bonne bouche
&lt;div class="main"&gt;
	&lt;div  id="swipeme-main" class="panel panel-main" &gt;&lt;section id="main-content"&gt;&lt;/section&gt;&lt;/div&gt;
	&lt;div class="panel panel-left" &gt;&lt;section id="left-content" &gt;&lt;/section&gt;&lt;/div&gt;
	&lt;div class="panel panel-right"&gt;&lt;section id="right-content"&gt;&lt;/section&gt;&lt;/div&gt;
&lt;/div&gt;


let menuOuvert, pageEncours, urlEncours;
function chargeChapitre(_url) {
    const ancre = '#'+_url.split('#')[1];
    const con = document.querySelector('#main-content');
    if (pageEncours != _url.split("#")[0]) {       
        // cache le container           
        let xhr = new XMLHttpRequest();
                        
        xhr.onreadystatechange = function (e) {
            if (xhr.readyState == 4 &amp;&amp; xhr.status == 200) {
                con.innerHTML = xhr.responseText;  
                pageEncours = _url.split("#")[0]
            }
        }
        xhr.onload = function (e) {
            console.log(e.status);
            if (xhr.readyState == 4 &amp;&amp; xhr.status == 200) {
                console.log("chargé");
                // va à l'ancre
                console.log('offsetTop',document.querySelector(ancre).offsetTop);
                con.scrollTop = document.querySelector(ancre).offsetTop;
            }
            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
        }
    }
}


Sarkari Result TurboTax Gogoanime


Il me semble que dans ton cas, le scroll doit s'appliquer à l'ensemble du document. Mais, on n'a pas assez d'information pour en être sûr ici.
Modifié par hikolipotu (19 Jan 2019 - 20:59)
Sujet clos
Aller à