Crear enlaces con scroll suave dentro de una página

jQuery

Es muy habitual que las páginas tengan cada vez más contenido, bien sea por comodidad, por temas de posicionamiento o porque cada vez son más grandes las pantallas de nuestros ordenadores. Debido a ésto, cada vez tenemos más secciones y puede que queramos crear un índice en la parte superior o en un lateral que nos lleve directamente al apartado que estamos buscando.

Vamos a ver cómo realizar este procedimiento mediante HTML y sin la necesidad de utilizar JavaScript. Seguidamente agregaremos el efecto de scroll suave.

Crea los enlaces mediante HTML

Lo primero que tenemos que tener en cuenta es que los elementos a los que queremos acceder deben tener su atributo ID. Imaginemos que queremos tener un acceso rápido al lo títulos <H2> de la página. Por ejemplo:

<h2 id="politica" >Política</h2>
<h2 id="sociedad" >Sociedad</h2>
<h2 id="tegnologia" >Tecnología</h2>

Vamos a crear ahora un menú con enlaces de modo que cada uno de ellos nos lleve instantáneamente a cada uno de los subtítulos que hemos creado:

<a href="#politica">Política</a>
<a href="#sociedad">Sociedad</a>
<a href="#tecnologia">Tecnología</a>

Tal y como podemos ver, solamente tenemos que enlazar al atributo ID de cada elemento al que queremos, pero con un hash delante. Es importante colocar el símbolo # delante de los identificadores para que queden fijados como anclas.

El problema de ésto es que resulta poco estético debido a la brusquedad con que se produce todo, ya que carece de animaciones. Vamos ahora a ver cómo crear un efecto de desplazamiento suave.

Crear animación de scroll suave mediante HTML

También se llama smooth scrolling. Vamos a crear una función con jQuery que nos servirá para agregar un efecto de scroll suave a todos los enlaces que apunten a un elemento dentro de la misma página:

$(document).ready(function() {
  $('a[href^="#"]').click(function() {
    var destino = $(this.hash);
    if (destino.length == 0) {
      destino = $('a[name="' + this.hash.substr(1) + '"]');
    }
    if (destino.length == 0) {
      destino = $('html');
    }
    $('html, body').animate({ scrollTop: destino.offset().top }, 500);
    return false;
  });
});

Lo que hacemos es utilizar la función .animate() de jQuery para crear una animación suave que durará 500 milisegundos. Es importante incluir la librería jQuery para que este código funcione. Si utilizáis WordPress, podéis copiar y pegar el código en algún archivo JavaScript (.js) e incluirlo en la cabecera de vuestra página, en el archivo header.php, aunque lo correcto sería utilizar la función wp_enqueue_scripts.

Espero que os haya sido útil.


Avatar de Edu Lazaro

Edu Lázaro: Ingeniero técnico en informática, actualmente trabajo como desarrollador web y programador de videojuegos.

👋 Hola! Soy Edu, me encanta crear cosas y he redactado esta guía. Si te ha resultado útil, el mayor favor que me podrías hacer es el de compatirla en Twitter 😊

Si quieres conocer mis proyectos, sígueme en Twitter.

8 comentarios en “Crear enlaces con scroll suave dentro de una página

  1. Se definen los puntos de ancla en HTML, luego se crea un archivo .js, dentro del archivo .js irá lo siguiente:

    $(document).ready(function () {
    $(‘a’).click(function(e){
    e.preventDefault();
    $(‘html, body’).stop().animate({scrollTop: $($(this).attr(‘href’)).offset().top}, 1000);
    });
    });

  2. Hola, tengo un gran problema. Utilice tu código para un ancla en especifico (#servicios) y me funciona perfectamente.
    Mi pregunta es: ¿Cómo puedo generar la función para diferentes anclas (no #). Te comparto el código, gracias, espero puedas ayudarme.

    $(document).ready(function() {
    $(‘a[href^=»#servicios»]’).click(function() {
    var destino = $(this.hash);
    if (destino.length == 0) {
    destino = $(‘a[name=»‘ + this.hash.substr(1) + ‘»]’);
    }
    if (destino.length == 0) {
    destino = $(‘html’);
    }
    $(‘html, body’).animate({ scrollTop: destino.offset().top }, 500);
    return false;
    });
    });

Deja una respuesta

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

“- Hey, Doc. No tenemos suficiente carretera para ir a 140/h km. - ¿Carretera? A donde vamos, no necesitaremos carreteras.”