Restauration de la position de défilement de la page avec jQuery

J’ai une opération de page qui utilise quelque chose comme:

$('#thetable tbody').replaceWith(newtbody); 

dans un rappel ajax. Parfois, si l’utilisateur avait fait défiler la page vers le bas, cette opération avait pour effet secondaire compréhensible de faire défiler la page vers le haut. Mais le remplacement semble transparent pour l’utilisateur, il est donc un peu gênant de devoir revenir en arrière. Et comme le newtbody normalement la même hauteur verticale que celle qu’il a remplacée, nous devrions être en mesure de faire en sorte que le script le fasse.

Maintenant, depuis que j’ai trouvé ça en train d’exécuter:

 $('body').scrollTop(300); 

depuis la console de débogage de JS fait ce que je souhaitais, je pensais que le remède simple serait:

 var scrollsave = $('body').scrollTop(); $('#thetable tbody').replaceWith(newtbody); $('body').scrollTop(scrollsave); 

mais pas de joie. Je n’ai pas encore eu recours à jQuery.ScrollTo .

Nous avons eu exactement le même problème, et le code suivant fonctionne très bien …

 var scroll = $(window).scrollTop(); // yada $("html").scrollTop(scroll); 
 var position= $(window).scrollTop(); //some things here $(window).scrollTop(position); 

Cela a fonctionné pour moi dans IE8 et FF.

Assurez-vous d’utiliser return false; pour terminer votre construction function(){} .

Le déclencheur d’événement peut tenter d’exécuter l’action par défaut de l’élément DOM cible, c’est-à-dire, < a href="" >;

Êtes-vous utiliser aspx? si c’est aspx:

 $(document).ready(function () { //------------ scroll------------- $('body').scrollTop(document.getElementById('<%=hdScroll.ClientID%>').value); $(window).scroll(function () { $("#<%= hdScroll.ClientID %>").val($(window).scrollTop()); //alert(document.getElementById('<%=hdScroll.ClientID%>').value); }); }); 
   

Vous pouvez vérifier périodiquement le div outerHeight et définir la propriété scrollTop une fois que le rendu du div a franchi la valeur de défilement.

 var g_Interval ; var g_ScrollTop ; function checkAndAdjustScroll() { var height=$('#content').outerHeight() ; if(height>g_ScrollTop) { $(window).scrollTop(g_ScrollTop) ; clearInterval(g_Interval) ; } } 

Et chaque fois que vous mettez à jour votre div avec du contenu AJAX, faites-le.

 g_ScrollTop=$(window).scrollTop() ; g_Interval=setInterval(checkAndAdjustScroll, 100) ; 

Vous devrez peut-être effectuer des ajustements en fonction du décalage de votre div rapport au haut de la page.

Essayez d’utiliser .html() au lieu de .replaceWith() :

$('#thetable tbody').html( newtbody.html() ); .

Je ne connais pas les goulots d’étranglement possibles en termes de performances, mais cela a fonctionné pour moi lorsque j’essayais de conserver la position de défilement d’une div, et cela semble bien fonctionner également avec la position de défilement de la page entière.