2010-01-05 26 views
29

que tiene una operación de página que utiliza algo como:posición de desplazamiento con jQuery

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

en una devolución de llamada Ajax. A veces, si el usuario ha desplazado la página hacia abajo, esta operación tiene el efecto secundario comprensible de desplazar la página hacia atrás. Pero el reemplazo parece transparente para el usuario, por lo que es un poco molesto tener que volver a bajar. Y dado que el newtbody normalmente tiene la misma altura vertical que el que reemplazó, deberíamos poder hacer que el script lo haga en su lugar.

Ahora, desde que descubrí que la ejecución:

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

desde la consola del depurador JS hace lo que yo esperaba que fuera, me pareció que el recurso sencillo sería:

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

pero no alegría. Todavía no he recurrido al jQuery.ScrollTo.

+0

que debería funcionar. ¿Puedes publicar una demostración? ¿Qué elemento es desplazable? – SLaks

+0

Solo se desplaza la página. Ningún elemento dentro del marcado es desplazable. Veré qué puedo hacer con una demostración. –

Respuesta

33

Tuvimos el mismo problema, y ​​el siguiente código funciona muy bien ...

var scroll = $(window).scrollTop(); 
// yada 
$("html").scrollTop(scroll); 
+1

Lo probé. También sin suerte. La depuración muestra que no importa lo que use como selector en la primera línea, ya sea 'window',' "body" ',' "html" ', etc., el valor devuelto por' scrollTop (...) 'siempre cero. ¡Impar! ¿Podría el contexto de estar en una devolución de llamada anónima posiblemente afectar eso? –

+0

Eso es extraño. Desplázate hacia abajo en esta página. Pegue esto en la barra de direcciones de su navegador y presione enter: 'javascript: alert ($ (window) .scrollTop());' Funciona bien aquí en IE8. –

+0

Hay algo raro en mis páginas que impide que esto funcione. Pero creo que tu respuesta es correcta para la mayoría de las páginas razonables. –

25
var position= $(window).scrollTop(); 

//some things here 

$(window).scrollTop(position); 

que trabajó para mí, tanto en IE8 y FF.

+5

La respuesta aceptada no funciona en Chrome 29 - esto sí. –

+2

También tiene más sentido. – Henrik

+0

Esta respuesta también funciona para desplazarse por elementos distintos de la ventana, por ejemplo, si tiene un modal con contenido desplazable, simplemente reemplace 'window' con' "# your-element-selector" '¡y funciona como un amuleto! – SergeyB

4

Asegúrese de utilizar return false; de interrumpir el constructo function(){}.

La activación de un evento puede estar tratando de ejecutar la acción predeterminada del objetivo DOM elemento es decir, < a href="" >;

+0

omg finalmente! Gracias a tu comentario, pude denegar el evento para que la página no se mueva a su posición anterior todo el tiempo. Consejo útil, gracias! – Pauls

0

Usted puede comprobar periódicamente el divouterHeight, y establezca la propiedad scrollTop una vez que el div prestación ha cruzado el valor de desplazamiento.

var g_Interval ; 
var g_ScrollTop ; 

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

Y cada vez que actualice su div con contenido AJAX, hacer esto

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

Es posible que tenga que hacer ajustes basados ​​en el desplazamiento de su div desde la parte superior de la página

1

Son ¿Usas aspx? si es 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); 
 
     }); 
 
     });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
    <asp:HiddenField Id="hdScroll" runat="server"></asp:HiddenField>

Cuestiones relacionadas