¿Desea añadir un efecto de desplazamiento suave a la parte superior de la página en su sitio web WordPress?
Un efecto de desplazamiento al principio es ideal cuando tienes una página larga y quieres ofrecer a tus usuarios una forma fácil de volver al principio. Ayuda a mejorar la experiencia de usuario de tu sitio web.
En este artículo, le mostraremos cómo añadir un efecto suave de desplazamiento hacia arriba en WordPress utilizando jQuery y un plugin.
¿Qué es el desplazamiento suave y cuándo debe utilizarse?
A menos que el sitio disponga de un menú de cabecera fijo, los usuarios que se desplacen hasta la parte inferior de una página o entrada larga de WordPress tendrán que deslizar o desplazarse manualmente hasta la parte superior para navegar por el sitio.
Eso puede ser una verdadera molestia y, a menudo, los usuarios simplemente pulsan el botón Atrás y se van. Por eso necesitas un botón que envíe rápidamente a los usuarios a la parte superior de la página.
Puede añadir esta funcionalidad como un simple enlace de texto sin utilizar jQuery, de esta forma:
<a href="#" title="Back to top">^Top</a>
Eso enviará a los usuarios a la parte superior desplazándose por toda la página en milisegundos. Funciona, pero el efecto puede ser brusco, como cuando te encuentras con un bache en la carretera.
El desplazamiento suave es lo contrario. Deslizará al usuario de vuelta a la parte superior con un efecto visualmente agradable. El uso de elementos como este puede mejorar drásticamente la experiencia del usuario en su sitio.
Dicho esto, vamos a ver cómo añadir un efecto de desplazamiento suave hacia arriba utilizando un plugin de WordPress y jQuery.
Cómo añadir un efecto de desplazamiento suave a la parte superior con un plugin de WordPress
Este método es recomendable para principiantes, ya que puede añadir un efecto de desplazamiento hacia arriba a un sitio web de WordPress sin tocar una sola línea de código.
Lo primero que tienes que hacer es instalar y activar el plugin WPFront Scroll Top. Si necesita ayuda, consulte nuestra guía sobre cómo instalar un plugin de WordPress.
Una vez activado, puede ir a Ajustes ” Desplazamiento superior desde su escritorio de WordPress. Aquí puede configurar el plugin y personalizar el efecto de desplazamiento suave.
En primer lugar, tendrás que hacer clic en la casilla de verificación “Activado” para activar el botón de desplazamiento hacia arriba en tu sitio. A continuación, verás opciones para editar el desplazamiento, el tamaño del botón, la opacidad, la duración del fundido, la duración del desplazamiento, etc.
Si se desplaza hacia abajo, encontrará más opciones como editar el tiempo de ocultación automática, activar la opción de ocultar el botón en dispositivos pequeños y ocultarlo en la pantalla de wp-admin.
También puedes editar lo que hace el botón al hacer clic en él. Por defecto, se desplazará a la parte superior de la página, pero puedes cambiarlo para que se desplace a un elemento concreto de la entrada o incluso enlazar a una página.
También hay una opción para cambiar la ubicación del botón. Por defecto aparecerá en la esquina inferior derecha de la pantalla, pero también puedes elegir moverlo a cualquiera de las otras esquinas.
El plugin WPFront Scroll Top también ofrece filtros para mostrar el botón de desplazamiento hacia arriba solo en las páginas seleccionadas.
Normalmente, aparecerá en todas las páginas de tu blog WordPress. Sin embargo, puedes ir a la sección “Mostrar en páginas” y elegir dónde quieres que aparezca el efecto de desplazamiento a la parte superior.
El plugin también ofrece diseños de botones prediseñados entre los que puede elegir. Usted debe ser capaz de encontrar fácilmente un diseño que se adapte a su sitio.
Si no puede encontrar un botón de imagen pre-construido que funcione para usted, entonces hay una opción para subir una imagen personalizada de la biblioteca de medios de WordPress.
Cuando hayas terminado, sólo tienes que hacer clic en el botón “Guardar cambios”.
Ahora puede visitar su sitio web para ver el botón de desplazamiento hacia arriba en acción.
Añadir desplazamiento suave al efecto superior con jQuery en WordPress
Este método no es recomendable para principiantes. Es adecuado para las personas que se sienten cómodas editando temas, ya que incluye la adición de código a su sitio web.
Utilizaremos jQuery, algo de CSS y una única línea de código HTML en tu tema de WordPress para añadir el efecto de desplazamiento suave en la parte superior.
Primero, abre un editor de texto como Notepad y crea un archivo. Guárdalo como smoothscroll.js.
A continuación, deberá copiar y pegar este código en el archivo:
jQuery(document).ready(function($){
$(window).scroll(function(){
if ($(this).scrollTop() < 200) {
$('#smoothup') .fadeOut();
} else {
$('#smoothup') .fadeIn();
}
});
$('#smoothup').on('click', function(){
$('html, body').animate({scrollTop:0}, 'fast');
return false;
});
});
Después de eso, puede guardar el archivo y subirlo a la carpeta /js/ en el directorio de su tema de WordPress. Para más detalles, consulta nuestra guía sobre cómo usar FTP para subir archivos a WordPress.
Si tu tema no tiene un directorio /js/, puedes crear uno y subir smoothscroll.js a él. También puedes consultar nuestra guía sobre la estructura de archivos y directorios de WordPress para obtener más información.
Este código es el script jQuery que añadirá un efecto de desplazamiento suave a un botón que lleva a los usuarios a la parte superior de la página.
Lo siguiente que tienes que hacer es cargar el archivo smoothscroll.js en tu tema. Para ello, pondremos en cola el script en WordPress.
Después, simplemente copia y pega este código en el archivo functions. php de tu tema. No recomendamos editar directamente los archivos del tema porque el más mínimo error puede romper tu sitio. En su lugar, puede utilizar un plugin como WPCode y seguir nuestro tutorial sobre cómo añadir fragmentos de código personalizados en WordPress.
wp_enqueue_script( 'smoothup', get_template_directory_uri() . '/js/smoothscroll.js', array( 'jquery' ), '', true );
En el código anterior, le hemos dicho a WordPress que cargue nuestro script y también que cargue la biblioteca jQuery ya que nuestro plugin depende de ella.
Ahora que hemos añadido la parte jQuery, vamos a añadir un enlace real a nuestro sitio de WordPress que lleve a los usuarios de vuelta a la parte superior. Simplemente pegue este HTML en cualquier parte del archivo footer.php de su tema. Si necesitas ayuda, consulta nuestro tutorial sobre cómo añadir código de cabecera y pie de página en WordPress.
<a href="#top" id="smoothup" title="Back to top"></a>
Habrás advertido que el código HTML incluye un enlace pero no un texto de anclaje. Esto se debe a que utilizaremos un icono de imagen con una flecha hacia arriba para mostrar un botón de volver al principio.
En este ejemplo, estamos utilizando un icono de 40x40px. Simplemente añade el CSS personalizado que aparece a continuación a la hoja de estilos de tu tema.
En este código, utilizamos un icono como imagen de fondo del botón y lo establecemos en una posición corregida. También hemos añadido una pequeña animación CSS, que gira el botón cuando el usuario pasa el cursor sobre él.
#smoothup {
height: 40px;
width: 40px;
position:fixed;
bottom:50px;
right:100px;
text-indent:-9999px;
display:none;
background: url("https://www.example.com/wp-content/uploads/2013/07/top_icon.png");
-webkit-transition-duration: 0.4s;
-moz-transition-duration: 0.4s; transition-duration: 0.4s;
}
#smoothup:hover {
-webkit-transform: rotate(360deg) }
background: url('') no-repeat;
}
En el CSS anterior, asegúrate de sustituir https://www.example.com/wp-content/uploads/2013/07/top_icon.png por la URL de la imagen que deseas utilizar. Puedes subir tu propio icono de imagen utilizando el cargador de medios de WordPress, copiar la URL de la imagen y pegarla en el código.
Esperamos que este artículo te haya ayudado a añadir un efecto de desplazamiento suave hacia arriba en tu sitio usando jQuery. Puede que también quieras ver nuestra selección experta de los mejores plugins de WordPress para pequeñas empresas y nuestra guía paso a paso sobre cómo crear una tienda online.
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
Syed Balkhi says
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!
Jiří Vaněk says
Previously, I didn’t have a ‘back to top’ button on the page, but as my articles became longer and longer, I didn’t want users to spend several seconds scrolling. I started using this exact plugin, and it’s fantastic. It significantly enhances user comfort, even though at first glance it might seem unnecessary. It isn’t.
Asha says
Thank you very much! This is very clearly explained. Helpful.
Marco says
The Jquery method didn’t work for me using a Twenty-seventeen child theme. Oh well. The hyperlink version did work perfectly, thankfully, and it’s good enough for me.
Marco says
One question…could one reason why this is not working for me (the jquery method) be because my WordPress installation is in a subfolder? It’s the only reason I can think of.
Taffeltrast says
Would love this, but it break the footer.php. The footer simply does not load.
When i try ad it to footer.php i get “There is a syntax error on line 14. etc etc”, and when i try upload it anyway, the footer does not load.
oliver says
thanks a lot, simple and effective.
my two cents, if you allready have a custom.js file in your theme you can simply add the jquery function in this file instead of creating a new file and enqueue again.
Personnally i prefer to have all my small scripts in one file.
Stuart says
Child Theme Designed by Blank |
<?php }
add_action('wp_head', 'my_favicon');
What am I doing wrong ? This is my funtions.php new to wp_enqueue_scripts.
Stuart says
Twenty Fifteen-Child Theme made a Js folder added all the wp_enqueue_script but no dice not sure what went wrong. I want to use less plugins as possible they seem to slow WordPress sites down. Added A favicon perfect wp_enqueue_script kind of new to me. Any help?
Donald says
Hi, does this still work? The icon appears (if I temporarily change the CSS to display:block), the script shows up as loaded in the Firefoxe developers’ toolbox console. However I get the following error message for line 1:
‘SyntaxError: missing ; before statement’
I’ve copied the script as above:
01 jQuery(document).ready(function($){
02 $(window).scroll(function(){
03 if ($(this).scrollTop() < 200) {
04 $('#smoothup') .fadeOut();
05 } else {
06 $('#smoothup') .fadeIn();
07 }
08 });
09 $('#smoothup').on('click', function(){
10 $('html, body').animate({scrollTop:0}, 'fast');
11 return false;
12 });
13 });
Can anyone see what the problem might be?
Donald
Josh Patterson says
Is there any way to make this fade out before it gets to the bottom of the page?
jaybob says
Hi, its working fine. Thank you for the tutorial but i only have just one problem, the image appears to quick. can i do something to appear later / a little bit down, after scrolling?
Aaron says
This is a very clean way to pull this off. By far my favorite I’ve found.
Quick question… I have put it in my footer.php file… How can I get it to stop sticking at a certain point? For example, I have a footer that is 575px tall and I don’t want the icon going into that area. Basically stop the fixed position at say, 600px from the bottom of the page.
Ulv says
Would this solution add the smoothscroll.js file to the portion of the html file or…?
emanuele says
Hi,
is possible to add smooth scroll in menu for scroll page?…i have create a one page template and i want to scroll it by menu…thank you
StefsterNYC says
If I understand you correctly you want to add it to the main menu nav? Correct? Simply use the same selector name but change the css completely. So that the image won’t appear.
Make sense?
Paul says
Thanks à lot for this tip ! However I’ve got a problem. When I reduce the size of the screen, my arrow go away while I want it in a specific place.
Is there a way to fix that ?
Thanks
Paul
Paul says
I found a solution for my problem. I just had to change my css to :
#smoothup {
top: 572px;
left: auto;
margin-left: -68px;
}
Mushir says
Thank you man! works like magic.. you really made my day!
Steven Wolock says
Thanks for this! It works great.
Question: Is that closed bracket correct after -webkit-transform: rotate(360deg)?
etech0 says
I set this up on my site, but I don’t see the icon! How can I find out why it’s not working?
Thanks!
WPBeginner Support says
There could be any possible reasons. First make sure you have uploaded the image, then check that the background: url has the correct URL and that it leads to your image. Lastly check that jquery and your .js file is loaded. Lastly, try tweaking CSS values for display, position, and text-indent.
Administrador
etech0 says
I figured it out – I had to change the 40px height and width to conform with my image.
Thanks for a great tutorial!
Alexander Gruzov says
Thanks!