Foro de elhacker.net

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
  1. <a href="#seccion1" id="link1">Ir a sección 1</a>

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

Código
  1. <div id="seccion1">
  2.    <!-- contenido aqui -->
  3. </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
  1. $('#link1').on('click', function(e) {
  2.    e.preventDefault();
  3.    $("html, body").animate({scrollTop: $('#section1').offset().top }, 1000);
  4. });

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