Scroll à l'ouverture d'une fenêtre modale

Version imprimable

Bonjour,
J'ai développé un site web dans lequel j'ai intégré une div, remplie à la volée en ajax et qui apparait comme une fenêtre modale lorsqu'on clique sur un lien.
Mon problème est que si on est en bas de la page, cela provoque un retour en haut de page, ce qui oblige à revenir au point où on en était avant de cliquer sur le lien et est même un peu perturbant.
Le mieux est de voir par vous-même:
http://www.polebio.lrsv.ups-tlse.fr/.../searchfortest (déjà là le problème existe, bien que moins génant).
Dans le menu déroulant laisser sur All. Cases de la colonne du milieu: choisir Brachypodium (2eme case). Cases de la colonne de droite: choisir Leaves (9eme case), puis cliquer sur search. Cela affiche un tableau contenant des *.
Scroller en bas du tableau (ou mieux tout afficher et cliquer sur une * de la dernière ligne) et là vous comprendrez pourquoi l'utilisateur risque d'être un peu surpris...

Le script simplifié:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 function pop_up(xml,uid,label){ var url = "http://www.polebio.lrsv.ups-tlse.fr/WallProtDB//index.php/searchfortest/modal2/"+xml+'/'+uid+'/'+label $.post(url, function(data) { data+='<br /><br /><input type="button" value="close" onclick="close_cd()">'; $('#overlay_form').html(data); //Setting the content of html }); //open popup $("#overlay_form").fadeIn(1000); //Recuperer les coordonnees de la souris quand on clique sur un lien (*) du datatable, afin d'afficher la fenetre modale la ou on a cliqué $("#searchTable").click(function(e){ X=e.pageX; Y=e.pageY; positionPopup(X,Y); }) } function positionPopup(X,Y){ if(!$("#overlay_form").is(':visible')){ return; } $("#overlay_form").css({ position:'absolute', left:X, top:Y }); } function close_cd(){ $("#overlay_form").fadeOut(500); //Closing the opened window }
Dans le body:
Pour chaque * du tableau on a:

Code:

<a href="#" onclick="pop_up('xmlfile','id','nameOfSequence')">*</a>

Et pour finir, un div unique qui se remplit et se positionne selon le lien qu'on a cliqué.

Code:

<div id="overlay_form" style="display:none;"></div>

Voilà, si quelqu'un a une solution ou un lien vers une méthode plus fonctionnelle, je suis preneur !

Merci beaucoup,

Sohnic

En fait il suffisait de travailler avec les ancres:
Le code HTML (le lien) devient (on passe un paramètre supplémentaire au javascript + ajout d'une ancre):

Code:

1
2
3
4
5
 
 
<a href="#" onclick="pop_up('xmlfile','id','nameOfSequence','cellnumber')">*</a>
 
<div id="cellnumber"></div>";

Et le javascript:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
 
function pop_up(xml,uid,label,cellnumber) //paramètre supplémentaire cellnumber
{
///////Rien ne change//////////////////	
var url = "http://www.polebio.lrsv.ups-tlse.fr/WallProtDB//index.php/searchfortest/modal2/"+xml+'/'+uid+'/'+label
	$.post(url, function(data) {
			data+='<br /><br /><input type="button" value="close" onclick="close_cd()">';
			$('#overlay_form').html(data);  //Setting the content of html 
 
	});
 
	//open popup
	$("#overlay_form").fadeIn(1000);
 
        //Recuperer les coordonnees de la souris quand on clique sur un lien (*) du datatable, afin d'afficher la fenetre modale la ou on a cliqué
	$("#searchTable").click(function(e){
 
				X=e.pageX;
 				Y=e.pageY;
				positionPopup(X,Y);
			})
//////////////////jusque la
//Soit on utilise ca, avec un effet de ballayage
/*$('html,body').animate({scrollTop: $("#"+cellnumber).offset().top}, 'fast'     );
$('html,body').animate({scrollLeft: $("#"+cellnumber).offset().left}, 'fast'      );*/
 
//Soit ca, avec un effet d'immobilite
$('html,body').animate({scrollLeft: $("#"+cellnumber).offset().left,
	scrollTop: $("#"+cellnumber).offset().top
	}     );
}
 
//////Les autres fonctions restent à l'identique

Et une autre méthode, sans les ancres et qui donne de meilleurs résultats pour le repositionnement latéral:

Remplacer ce bout de code:
Code:

1 2 3 4 5 6 //Soit ca, avec un effet d'immobilite $('html,body').animate({scrollLeft: $("#"+cellnumber).offset().left, scrollTop: $("#"+cellnumber).offset().top } ); }
par:
Code:

1 2 3 4 5 6 7 8 9 //1-coordonnees actuelles du scroll var $window = $(window); Xscroll=$window.scrollLeft(); Yscroll=$window.scrollTop(); //2- replacer le scroll $('html,body').animate({scrollLeft: Xscroll, scrollTop: Yscroll } );
La fonction a un argument de moins:
Code:

1 2 function pop_up(xml,uid,label)
Et le lien d'appel devient (le div qui suit n'est plus nécessaire et a donc été supprimé):
Code:

1 2 <a href="#" onclick="pop_up('xmlfile','id','nameOfSequence')">*</a>
Peut-être que ça aidera quelqu'un un jour !

S.