Discussion :

[goku19]

Bonjour,

Je voudrais pouvoir utiliser un scrollTop après un chargement de contenu en ajax.
Le problème est que la page se charge bien mais le scrollTop ne s'effectue pas...

Voila mon code :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
<nav>
   <ul>
      <li><a href="mentions_legales.html" data-type="lien">Mentions Légales</a></li>
      <li><a href="#qui_sommes_nous" data-type="ancre">Qui sommes nous ?</a></li>
   </ul>
</nav>
<section id="main>
	CONTENU
	<div id="qui_somme_nous">CONTENU</div>
</section>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
$('a').on('click', function(){
	if($(this).data('type') == 'ancre'){
		ancre = $(this).attr("href");
		page = association_ancre_page[ancre];
		//verifie si l'ancre est appelé dans la page courante grace a un tableau associatif (une ancre correspond à une page)
		if(current_page != page){
			$.ajax({
				url:page,
				cache: false,
				success: function(html){
					$("#ajax").empty();
					$("#ajax").append(data);
					$("#ajax").fadeIn(900);
					if(typeof(ancre) != 'undefined'){
						$('html, body').animate({scrollTop: $(ancre).offset().top)}, 'slow');
					}
				}
			})
		}
 
	}
}

Voila donc comme je l'expliquais, le scrollTop ne veux pas se faire pour une raison inconnu...

Ps : Je précise que mon scrollTop fonctionne quand je suis dans l'ancre est dans la page actuelle.

[Bovino]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$(this).data('type') == ancre

Ca ne semble pas correct ça...
Avec cette syntaxe, ancre est supposé être une variable, or elle n'est définie qu'à la ligne suivante...

[goku19]

Désolé, j'ai mal copié/collé ^^ (je ne suis pas sur le même ordi c'est pour ça :-p)

[danielhagnoul]

Il me semble que :

<li><a href="#qui_sommes_nous" data-type="ancre">Qui sommes nous ?</a></li>.

$( this ).data( 'type' ) == 'ancre'.

est correct, par contre il y a une erreur dans le code de la fonction "success" (une ")" en trop). Pour la transaction AJAX, c'est un GET ou un POST ? Manque aussi "var" pour les variables ancre et page.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
success: function( data ){
    $( "#ajax" ).html( data ).fadeIn( 900 );
 
    if ( typeof( ancre ) != 'undefined' ){
        $( 'html, body' ).animate( { "scrollTop" : $(ancre).offset().top }, 'slow' );
    }
}