Cuando estamos desarrollando y queremos que nuestra página tenga una mejor experiencia de usuario es importante agregar pequeños códigos para aumentar la UIX.
En esta ocasión te traemos un Waan TIp para que cuando un usuario le de click a un botón o un link que se encuentra en la página on haga ese brinco horrible y parezca error, si no que únicamente se hace un efecto de arrastre hasta la sección donde esta link.
INSTRUCCIONES:
-
En tu código CSS agregar lo siguiente:
html {
scroll-behavior: smooth;
}
- Busca las etiquetas en tu archivo index, theme, etc. y agrega el siguiente código antes del cierre de las etiquetas <head> ( Insertar código aquí )</head>
<script>
// Select all links with hashes $('a[href*="#"]') // Remove links that don't actually link to anything .not('[href="#"]') .not('[href="#0"]') .click(function(event) { // On-page links if ( location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname ) { // Figure out element to scroll to var target = $(this.hash); target = target.length ? target : $('[name=' + this.hash.slice(1) + ']'); // Does a scroll target exist? if (target.length) { // Only prevent default if animation is actually gonna happen event.preventDefault(); $('html, body').animate({ scrollTop: target.offset().top }, 1000, function() { // Callback after animation // Must change focus! var $target = $(target); $target.focus(); if ($target.is(":focus")) { // Checking if the target was focused return false; } else { $target.attr('tabindex','-1'); // Adding tabindex for elements not focusable $target.focus(); // Set focus again }; }); } } });
</script> - A tus botones o links los debes direccionar de la siguiente manera:
<a href="#link" >
- No pongas toda la URL completa por que te genera un salto de página y parece error.
