En algunas ocasiones, necesitamos que al acceder a una página, ésta haga scroll automáticamente hasta un elemento en concreto.
Por ejemplo:
- Editamos un elemento de una lista y queremos que el scroll se posicione a esa altura
- Añadimos un producto al carrito y queremos ir a la cesta justo al nivel de ese producto
- Tenemos un listado de documentos por categorías y queremos posicionarnos en una categoría en concreto
- etc…
Las razones pueden ser miles, pero en todos los casos, podemos solucionar el tema del scroll fácilmente con jQuery, utilizando la función a continuación:
$("#button").click(function() {
$('html, body').animate({
scrollTop: $("#elementtoScrollToID").offset().top
}, 2000);
});En este caso, estamos haciendo scroll a un elemento con un ID en concreto, pero si nuestro caso es parecido a uno de los mencionados arriba, podemos combinar PHP con jQuery para ir a la fila, producto o documento que queramos indicando añadiendo el ID mediante PHP.
Por ejemplo, en una lista de productos, añadiremos al atributo ID del div o celda correspondiente, el identificador del producto:
<div id=»producto-<?=$id_producto?>»> contenido de la capa </div>
De esta forma, si pasamos el id del producto por GET, por ejemplo, podremos recuperar ese parámetro e indicarlo en el jQuery para el scroll:
$("#button").click(function() {
$('html, body').animate({
scrollTop: $("#producto-<?=$_GET['idp']").offset().top
}, 2000);
});Y de esta forma, la página hará scroll automáticamente hasta ese elemento en concreto al cargar.
¿Eres implementador o desarrollador WordPress?
En la Zona DPW encontrarás más recursos, tutoriales, plantillas, y una biblioteca de snippets para poder utilizar en tu día a día y ganar tiempo en tu trabajo:
ACCEDER AHORA
Comentarios
4 respuestas a «Scroll a un elemento en concreto con jQuery»
|
Hola una cuestión con este código, yo lo uso con enlaces que llevan a una ficha que quiero que cuando se entre por primera vez se posicione en un punto concreto, con este código:
var strAncla = selector del enlace»;
$(‘body,html’).stop(true,true).animate({
scrollTop: $(strAncla).offset().top
},1000);
}
dependiendo de que altura se encuentre el enlace por ejemplo arriba del todo, funciona, cuando carga la página hace el efecto correcto, baja hasta el punto indicado.
Pero cuando el enlace se encuentra a media pagina o abajo, la página se abre en la misma posición y es verdad que hace la animación hacía arriba, pero en vez pararse en el punto indicado, se va directamente arriba del todo y ahí se para.
Osea tiene en cuenta donde se encuentra el cursor en la página anterior y te posiciona automáticamente ahí, si esta más arriba del punto a donde ha de moverse hace el efecto esperado, pero si esta más abajo se sube arriba del todo.
Y no tengo ni idea de como corregir este comportamiento.
|
Hola Isaac,
Me es muy complicado saber cual puede ser el problema sin verlo, si quieres pásame la url por aquí o por email y le echo un vistazo.
Saludos!
|
Gracias al final lo solucione de esta forma:
function desplazamiento(strAncla, distancia) {
var posicion = $(strAncla).offset().top;
if($(strAncla).offset().top > 0) {
return $(‘html, body’).animate({ scrollTop: posicion }, 1000);
}
else if($(strAncla).offset().top < 0) {
return $("html, body").animate({ scrollTop: distancia }, 1000);
}
}
La distancia es una suma que obtengo del outerHeight() de los elementos que hay por encima y funciona.
|
Genial! Muchas gracias por pasarte a dejar esta solución Isaac.