Crear enlaces con scroll suave dentro de una página

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.

---