Cómo crear Anchor Links para crear saltos de página internos en tu web

Con los Anchor Links podemos crear fácilmente saltos de página dentro de nuestra página Web. Al estilo de los índices de Wikipedia.

Estos enlaces son muy útiles en varios casos:

  • Para crear un pequeño índice o introducción al comienzo de la página que nos lleve a cada apartado al pinchar.
  • Para referenciar a secciones de la misma u otra página en el texto y que nos lleve ahí al pinchar en una palabra.
  • Para crear webs de una sola página (muy de moda hoy en día) y que los menús nos lleven directamente a cada sección (y no a otras páginas). Por ejemplo si elegimos el apartado Contacto del menú, nos llevará a la sección Contacto de la misma página (por ejemplo al final). Por ejemplo esto te llevará al final de la página.
  • También podemos usarlo para crear botones de “subir” y que nos devuelva al principio de la página.

ancla

Os explicamos cómo crear estos enlaces ancla:

  1. Tienes que poner una etiqueta al destino con el atributo id de CSS. El destino ser una palabra, un div, una imagen…cualquier elemento al que puedas asignar un id de css. Por ejemplo (sólo algunos de los posibles:
    <p id="etiqueta">Soy el destino</p>
    <div id="etiqueta"></div>
    <h1 id="etiqueta">Título destino</h1>
  2. En el destino pon un enlace que simplemente contenga #etiqueta .  Se puede, de nuevo poner en cualquier elemento que admita un enlace (palabra, frase, imagen, apartado de un menú).
    Esta es la versión simple.
    Si lo que quieres es crear un menú, es mejor que antes de la etiqueta pongas la url completa. Si, por ejemplo tu índice es www.tudominio.es  y quieres llevar a el apartado contacto de la misma página (al que previamente has puesto una etiqueta) pon www.tudominio.es/#contacto
    Si no pones la url completa, en una subpágina no sabrá llegar a ese apartado.
  3. Recuerda que si lo que quieres es poner enlaces de “ir al principio” o “ir al final”  podéis poner divs vaciós con etiquetas como en el ejemplo del apartado 1 o el ejemplo de esta página.

Ahora probad y jugad. Permite crear páginas muy interactivas y de mucha facilidad de uso para los clientes.

Nota: No uséis espacios en las etiquetas. Mejor con guiones.

Final

Esto te llevará al principio

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Resumen de nuestra Política de Privacidad

  • Responsable: SmythSys IT Consulting SLNE.
  • Finalidad: Gestionar y moderar los comentarios.
  • Legitimación: Necesitas dar tu consentimiento para publicar un comentario.
  • Destinatarios: Tus datos se alojan en los servidores de OVH.
  • Derechos: Tienes derecho a acceder, rectificar, limitar y suprimir los datos en la dirección del responsable (en nuestra política de privacidad).

Scroll al inicio