IAQ (Interesting Asked Questions), recordando la posición del scroll con el soporte de jQuery.
0. Índice de contenidos.
1. Introducción
Una nueva respuesta a una pregunta interesante, en este caso sobre cómo mantener la posición del scroll de una capa cuando el cliente pulsa sobre el botón de atrás.
No todos los navegadores respetan la posición del scroll, ni siquiera de la pantalla, en este tutorial vamos a ver cómo forzarlo simplemente, con el soporte de jQuery.
2. La pregunta.
Tenemos una página que saca una lista en pantalla con 1000 filas.
La pantalla tiene una capa con un estilo que produce un scroll para poder ver las filas inferiores.
Cada fila tiene un radio button. Seleccionando el radio button y pulsando un botón se va a otra pantalla con datos de la fila seleccionada.
Al pulsar el botón «Atrás» se vuelve a la pantalla de la lista y el problema es que la lista aparece desde el principio.
El objetivo es que si hemos seleccionado la fila 600, al volver esté seleccionada esa fila y que la pantalla haga scroll automáticamente a esa fila.
En caso contrario el usuario está obligado a volver a busca la fila.
3. La respuesta.
La primera recomendación es limitar el número de registros que se muestra en el listado, incluyendo una paginación. Esto no tiene ninguna relación con el scroll,
aún incluyendo paginación podemos tener scroll, pero seguro que agiliza la carga de la página.
En javascript hay una manera de forzar el posicionamiento del scroll en una capa o en pantalla, el problema es que hay que guardar dicha posición en «algún sitio»
cuando se navega a la página de detalle, para que, en la carga de la página cuando se vuelva al listado, en el evento onload se posicione el scroll de la capa en
función de dicho parámetro guardado. Ese «algún sitio» puede ser una cookie.
Tanto para guardar la posición de la capa en una cookie, como para después posicionarla podríamos hacer uso de jQuery, también se podría hacer directamente con javascript pero haciendo
uso de jQuery será más sencillo, menos código y más fácil de mantener. JQuery es una librería ligera que amplía la funcionalidad de javascript, aquí podéis consultar una
introducción a jQuery.
El código que podría incluirse en la cabecera de la página de listado podría ser el siguiente:
...
<script type="text/javascript" src="/wp-content/uploads/tutorial-data/http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="/wp-content/uploads/tutorial-data/jquery.cookies.2.2.0.min.js"></script>
<script type="text/javascript">
// ejecución del código en el arranque de la página
$(document).ready(function () {
// posicionamos el scroll de la capa en la última posición guardada en la cookie
// si no hubiese en la posición 0
$("#listado").scrollTop($.cookies.get("scroll") || 0);
});
// ejecución del código antes de salir de la página
window.onbeforeunload = function () {
// almacenamos en la cookie la posición del scroll de la capa de listado
$.cookies.set('scroll', $("#listado").scrollTop() );
}
</script>
</head>
El código está comentado y el soporte para almacenar y recuperar la posición del scroll de una cookie lo podemos obtener con un plugin que podemos descargar de aquí
jQuery cookie plugin.
A continuación, un ejemplo:
Recuerda la posición del scroll
Cuando volváis a pulsar sobre el enlace la posición del scroll estará donde la dejéis por última vez (siempre que no limpieis las cookies ;-D).
Un saludo.
Jose
Un comentario
Muy bueno.