Test Foro de elhacker.net SMF 2.1

Programación => Desarrollo Web => Mensaje iniciado por: VintageChanel en 2 Julio 2015, 02:17 AM

Título: Redireccionar a div dentro de una misma pagina
Publicado por: VintageChanel en 2 Julio 2015, 02:17 AM
hola, tengo un nav con varias opciones y cuando hago click en una de ellas quiero que me redireccione a una div dentro de la misma pagina, teniendo un <a> que me redireccione a una div class.
Título: Re: Redireccionar a div dentro de una misma pagina
Publicado por: Usuario Invitado en 2 Julio 2015, 03:36 AM
Redirección es cuando te mueves entre vistas (HTML). Lo que quieres es solo moverte hacia una sección dentro del mismo documento.

Supongamos que tienes un elemento a:

Código (html4strict) [Seleccionar]
<a href="#seccion1" id="link1">Ir a sección 1</a>

Entonces, el target debería tener el indentificador #seccion1:

Código (html4strict) [Seleccionar]
<div id="seccion1">
    <!-- contenido aqui -->
</div>


Ya está. Cuando se haga click en el hyperlink, se moverá desde el nav hasta el div objetivo.

La transición es instantánea, por lo que no es muy user-friendly. Puedes hacer que se deslice suavemente hacia el div objetivo con un poco de código javascript:

Código (javascript) [Seleccionar]
$('#link1').on('click', function(e) {
    e.preventDefault();
    $("html, body").animate({scrollTop: $('#section1').offset().top }, 1000);
});


Demo en JSFiddle: http://jsfiddle.net/vbxsuc4c/