ScrollTop vers ancre après un chargement de contenu en Ajax

Version imprimable

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:

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:

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.

28/03/2014, 16h46
Bovino

Code:

$(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...
28/03/2014, 16h59
goku19

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

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:

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' ); } }