elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.


 


Tema destacado: Recuerda que debes registrarte en el foro para poder participar (preguntar y responder)


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  Redireccionar a div dentro de una misma pagina
0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: Redireccionar a div dentro de una misma pagina  (Leído 8,500 veces)
VintageChanel

Desconectado Desconectado

Mensajes: 40



Ver Perfil
Redireccionar a div dentro de una misma pagina
« en: 2 Julio 2015, 02:17 »

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.


En línea

Take Risks
Usuario Invitado


Desconectado Desconectado

Mensajes: 625



Ver Perfil
Re: Redireccionar a div dentro de una misma pagina
« Respuesta #1 en: 2 Julio 2015, 03:36 »

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/


En línea

"La vida es muy peligrosa. No por las personas que hacen el mal, si no por las que se sientan a ver lo que pasa." Albert Einstein
Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines