3 scripts jQuery para el desplazamiento suave de enlaces a secciones

Uno de los puntos fundamentales a la hora de diseñar una web es el suavizado de los efectos y las acciones que se ejecutan. Entre ellos hay uno que se utiliza mucho en los menús de las páginas tipo “One Page”, que es el desplazamiento suave a las secciones dentro de la misma página.

Si bien es posible que utilicemos una plantilla que ya lo haga directamente, no siempre se utiliza del mismo modo. Por ejemplo, podemos tener un botón de Contacto que al pulsarlo baje a la sección de Contacto, o que vaya a una sección de otra página y queremos que lo haga desplazándose por la página, no yendo de golpe.

Vamos a mostraros 3 scripts para 3 casos diferentes:

• Desplazamiento suave dentro de la misma página.
• Desplazamiento suave entre páginas distintas.
• Desplazamiento suave de una distancia concreta (altura del navegador, un div, …).

Además tendremos en cuenta la posibilidad de tener una cabecera fija, que hace que la posición final sea diferente respecto a la ventana del navegador.

El primer caso podemos verlo en esta misma entrada en los enlaces de la lista superior. Los otros dos casos podemos verlos aplicados en la web https://tuedificioaccesible.com/, realizada por nosotros.

Desplazamiento suave dentro de la misma página

Este script es muy sencillo de utilizar y sirve para cualquier enlace a una sección dentro de la misma página.

$('a[href*=#]:not([href=#])').click(function() {
	if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
		var target = $(this.hash);
		target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
		if (target.length) {
			$('html,body').animate({
				scrollTop: target.offset().top-$('#header').height()
			}, 1000);
			return false;
		}
	}
});

(Nota: En la segunda línea, donde pone &amp.;&amp.; debería poner &&)

Básicamente lo que hace es detectar si el enlace es de tipo sección ( href=”#div” ), recoge el nombre de la sección y se desplaza hacía esa posición con una velocidad determinada.

La velocidad es el valor del método animate ( .animate({ … }, 1000) ). El valor se introduce en milisegundo, que en este caso equivale a 1 segundo. Cuanto más bajo sea el valor, más rápido hará el desplazamiento.

Pero, ¿qué ocurre si tenemos la cabecera fija? De forma predetermina colocará el inicio de la sección en la parte superior, pudiéndose cortar parte del contenido de la sección.

Lo que debemos hacer es decirle que tenga en cuenta la altura de la cabecera para que muestre la sección a continuación y no superponiéndose.

El modo de hacerlo es restando en el método animate esta altura:

$(‘html,body’).animate({ scrollTop: target.offset().top – $(‘#header’).height() }, 1000);

En el ejemplo hemos utilizado el div con id = header (#header). Cada plantilla tendrá un identificador o una clase diferente.

Desplazamiento suave entre páginas distintas

Continuando en la web https://tuedificioaccesible.com/ , si por ejemplo estamos en el blog y queremos ir al apartado Contacto del menú, éste es una sección de la Home. De forma predeterminada cargará la Home directamente en la sección, y sin respetar el espacio utilizado por la cabecera (de estar fija).

Para introducir el desplazamiento suave utilizaremos el siguiente script:

if(window.location.hash) {
      var target = $(window.location.hash); 
      
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top-$('#header').height()
        }, 1000);
        return false;
      }      
}

Este script es muy parecido al anterior. La diferencia está en cómo se obtiene la sección a la que hay que desplazarse. En este caso la obtiene de la URL (https://tuedificioaccesible.com/#contacto ) y el script se ejecuta cuando se va a cargar la página, recoge la sección y realiza el desplazamiento suave.

Aquí podemos considerar la cabecera fija del mismo modo que el ejemplo anterior, restando su altura.

Desplazamiento suave de una distancia concreta (altura del navegador, un div, …)

Este último script se utiliza mucho en páginas donde se coloca una imagen, o slider, video, etc. a pantalla completa. En la parte inferior de la pantalla se coloca una flecha o texto para indicar que hay más contenido debajo y que lo puedes pulsar para desplazarte. Al pulsar, la página baja toda la altura de la pantalla visible del navegador y te muestra el siguiente contenido.

El script es el siguiente:

$('#idlink').click(function( event ){
	$heightDown = $(window).height() - $('#header').height();
            
	$('html, body').animate({
		scrollTop: $heightDown
	}, 1000);            
});

El script sigue siendo muy parecido, dado que el método que se utiliza es $(‘html,body’).animate( … ). En cada ejemplo lo que se hace es calcular de un modo diferente cuánto es lo que hay que bajar. Debemos identificar el enlace al que le vamos a aplicar el desplazamiento ( #idlink ).

En este caso, queremos bajar la altura completa del navegador ($(window).height() ) y restarle la de la cabecera, ya que está fija ( $(‘#header’).height() ).

En la página de inicio de https://tuedificioaccesible.com/ podemos ver una flecha que se mueve indicándonos que bajemos. Si la pulsamos, la pantalla baja hasta la siguiente sección, respetando el espacio ocupado por la cabecera.

Estos scripts los puedes introducir directamente en vuestro código, teniendo en cuenta que habrá que modificar el identificador de la cabecera, en caso de estar fija, y el del enlace del último script.

Estés donde estés, si necesitas un página web en WordPress, tienda online Woocemmerce, Desarollo de un plugin para WordPress, campañas de Google Ads, Shopping y Remarketing, así como una estrategia SEO no dudes en contactar con nosotros (Equipo de diseño web ubicados en Valencia) a través de nuestro formulario y te informaremos al respecto.