Damoin Web Services

Blog de Social Media y Desarrollo Web

Posicionar el contenido de una página con JQuery

En muchas ocasiones nos gustaria poder movernos dentro del contenido de una página y posicionar la pantalla en aquel lugar que nos interesa.

Antes se usaban los anchors pero ahora y gracias al framework de Javascript Jquery podemos focalizar la pantalla en cualquier sitio de nuestro código html.

Para ello usaremos una función extremadamente sencilla que se compone solo de 2 lineas, recordar antes, que tenemos que tener un include con el js de Jquery.

var focalizar = $(“#donde_mover”).position().top;

$(‘html,body’).animate({scrollTop: focalizar}, 1000);

a la variable focalizar le asignamos el valor de la posicion superior del elemento html donde queramos posicionar la pantalla.

Con el evento animate de Jquery movemos la pantalla hasta la posicion en un intervalo de 1000 ms (1 segundo) y asi evitamos que el usuario tenga que hacer scroll.

Actualización: Tenemos otra posibilidad con scrollIntoView

$(‘#donde_mover’).get(0).scrollIntoView(true);