Agregar un botón de Ir Arriba en Moodle, o como se dice en inglés: Back to top, era una de las cosas que quería hacer hace tiempo y que en este artículo te voy a mostrar cómo hacerlo.
Este post en bastante sencillo y cortito, es de esos que seguro te encantará y que los usuarios de tu Moodle seguro apreciaran un montón 😍.
Este truco para agregar un botón Back to top en Moodle es válido a partir de las versiones 2.9. ¡Vamos!, que a estas alturas ya debieras haber actualizado si tienes una versión anterior.
Si no lo has hecho aún, aquí te dejo mi guía sobre cómo actualizar Moodle, para que corras a hacerlo.
Tabla de contenidos
¿Pero qué es ese botón Back to top?
Si no has visto todavía un botón Back to top, ¡dónde has estado estos años!. ¡Hey! no te lo tomes a pecho, sólo bromeaba 😜.
Es ese botón que aparece luego de hacer recorrido la página en vertical y que permite volver al tope de la página. Si no lo agarras todavía, te dejo una imagen.

Es muy valorado sobre todo para aquellas páginas web que tienen bastante recorrido con el Scroll (como Moodle en los cursos) y que para ubicarte en la parte de arriba debes remontar como un kilómetro 😅.
Con este botón estás sólo a un clic de la cabecera.
Nota
Para esta guía te sugiero lo pruebes en un servidor localhost, para después implementarlo en tu web en producción.
Haz una copia de seguridad antes de modificar los archivos en el servidor.
Agregando un botón Ir arriba en Moodle
Para hacer nuestro botón Back to top, tenemos tres pasos por hacer:
- Crear un archivo .js que contiene el código Javascript.
- Agregar el código HTML para que se muestre.
- Darle estilo al botón con CSS.
¡Manos a la obra!.
Creando el archivo Javascript
Primero crearemos el archivo Javascript que permite el efecto de volver arriba. Para ello haremos uso de la librería JQuery que viene implementada en Moodle por defecto.
Crea un archivo Javascript: abre el blog de notas, como por ejemplo Notepad, TextEdit o Notepad++. Copia el siguiente código dentro:
require(['jquery'], function($) { $(document).ready(function(){ $(window).scroll(function(){ if($(this).scrollTop() > 200){ $('#scroll').fadeIn(); }else{ $('#scroll').fadeOut(); } }); $('#scroll').click(function(){ $("html, body").animate({ scrollTop: 0 }, 600); return false; }); }); });
Luego, Guarda el archivo con el nombre: arriba.js
Es muy importante la extensión del archivo .js, ya que esto es lo que garantiza que sea reconocido como un archivo Javascript. Te dejo un vínculo para descargarlo directamente si así lo deseas.
Dato
Por defecto este código hace que el botón aparezca después de haber recorrido 200 pixeles hacia abajo en la página. Si quieres cambiar esto modifica en la cuarta línea if($(this).scrollTop() > 200){
el valor 200 por el que quieras.
Un número menor hará que aparezca antes y uno mayor para que tarde más.
Por cierto, parte de este código lo tomé de los chicos de CodexWorld.
Ahora dirígete dentro del Moodle, a la carpeta donde está ubicado el tema a agregar el Back to top: carpetamoodle > theme > nombretema. Crea ahí una carpeta llamada: javascript
, y copia en ella el archivo arriba.js que creamos.

Lo siguiente es ubicar en la carpeta principal del tema el archivo config.php, lo editamos y agregamos este código al final:
$THEME->javascripts_footer = array('arriba');
No olvides Guardar los cambios.

Tip
Sube el archivo arriba.js a tu servidor mediante FTP. Si tienes cPanel puedes hacer uso del Administrador de archivos, con el botón Cargar de la barra superior.
Para editar el archivo config.php descárgalo a tu computadora, edítalo con el Notepad, súbelo y sobrescríbelo en el servidor. Otra opción es hacerlo directamente en el servidor con el editor de Linux o cPanel.
Agregando el código HTML
Logueate como administrador en el Moodle, y vamos a: Administración del sitio > Apariencia > HTML adicional.
Agrega este código en el campo Antes de cerrar BODY.
<a href="#" id="scroll" title="Ir arriba" style="display: none;">Arriba<span></span></a>
Guarda los cambios.

Dando estilo al botón Back to top
Este paso es igual para todos los temas en Moodle, con una pequeña variación para el tema Boost. Te muestro como hacerlo primero para la mayoría de temas y luego para Boost.
A continuación, dirígete a: Administración del sitio > Apariencia > Temas > Nombredeltema.
Copiamos este código en el espacio denominado CSS personalizado.
@media screen and (min-width: 768px) { #scroll { position:fixed; right:10px; bottom:10px; cursor:pointer; width:50px; height:50px; background-color:#3498db; text-indent:-9999px; display:none; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; opacity: 0.7; } #scroll span { position:absolute; top:50%; left:50%; margin-left:-8px; margin-top:-12px; height:0; width:0; border:8px solid transparent; border-bottom-color:#ffffff } #scroll:hover { background-color:#e74c3c; opacity:0.7; filter:"alpha(opacity=100)"; -ms-filter:"alpha(opacity=100)"; } }
No olvides Guardar los cambios.

Dando estilo al tema Boost
Para el tema Boost es el mismo código CSS anterior solo que el lugar para colocarlo cambia un poco.
Vamos a: Administración del sitio > Apariencia > Temas > Boost. Haz clic a la pestaña Ajustes avanzados (Advanced settings).
Coloca el código CSS que te mostré anteriormente en el campo SCSS sin modificar (Raw SCSS). No te olvides de guardar.

Borrando la cache
Para finalizar solo nos queda borrar la cache de Moodle para que puedas observar el Back to top.
Para ello en Administración del sitio > Desarrollo > Purgar todas las cachés, haz clic al botón Purgar todas las cachés.
Con este ya debemos tener nuestro botón activo y listo para ser visualizado.
Busca una página que tenga bastante contenido en vertical, si la recorres debería estar disponible.
Con esto concluimos la guía, espero te haya gustado. Te puedo pedir un favor: deja un comentario que así ayudas a hacer crecer este blog 👍. Saludos.
Me he apresurado mucho…
Estoy empezando con esta nueva versión de Moodle y veo que con el tema Academi hay un botón en la misma zona que despliega un cuadro de texto que oculta el botón de Ir Arriba.
El botón está y funciona. Ahora tocará arreglar el CSS a ver si consigo ponerlo en otro lugar y que siga siendo útil, o mover, más bien, el que trae el Tema o Moodle. No tengo aún muy claro de dónde parte.
Muchísimas gracias nuevamente.
JP
Hola Juan.
Me alegra saber que pudiste resolver al final.
Saludos.
Hola, Diógenes.
He actualizado mi plataforma a la nueva 3.9 y ahora no funciona.
Hay un tema de los que vienen incluidos en la instalación que trae la funcionalidad, pero si instalas un Theme diferente, ya no funciona. Anteriormente lo he probado con los temas Academi y Klass, funcionaba perfectamente hasta la versión 3.5 (3.5 y 3.9 son versiones LTS).
Te agradecería algún comentario o actualización.
Gracias, y un saludo.
JP
Hola Juan.
Probé nuevamente esta guía con el tema Boost en Moodle 3.10 y funciono sin problemas.
Antes ya la había probado en la versión 3.9.
Si tienes una instalación fresca de Moodle pruébalo.
Muchas veces los plugins o configuraciones que traen los temas dan problemas con los javascript externos.
Espero esto sea de ayuda.
Saludos.
Gracias Diógenes por tu comentario.
Me ha funcionado correctamente con el tema Academi (Moodle 3.9.4) cuando he habilitado una segunda imágen en el carrusel de la página principal.
Actualmente viene únicamente una imagen, cuando antes (Academi para 3.1, 3.5) venía con 3 imágenes por defecto.
Se ve que, al habilitar una segunda imágen, se habilita también algo más (quizá las fuentes awsome) que hace que tu script funcione como siempre.
Cordial saludo y, nuevamente, muchas gracias.
JP
Hola Diógenes de seguro te preguntaras y de donde salio este, bueno te comento que son fan del Blog e intente colocar el botón y no me funciono la única diferencia es que que utilizo el tema Moove, pero realice los pasos que recomiendas, de todas maneras gracias, saludos desde España.
Hola Mario.
En un honor que nos sigas 🙂
Que versión de Moodle tienes?
Limpiaste la cache?
En ocasiones los archivos javascript (de base) de Moodle se corrompen he impiden se ejecuten adecuadamente. En estos casos reinstalo el Moodle o actualizo a la versión mas nueva.
Recomiendo hacer pruebas con un Moodle en tu computadora (localhost) para ver si sigue el problema.
He probado hoy mismo con la versión 3.9.2 (ultima disponible a la fecha) y funciona sin problemas en dos instalaciones distintas.
Saludos.
Gracias, tengo la 3.8 lo actualizaré a ver 👍🤗
a mi tampoco me salió… con la versión 3.11
Excelente artículos hay aqui.
Hola Syl.
Acabo de probarlo y funciona con Moodle 3.11 sin problemas.
En Moodle 4 si veo que no funciona, revisare el articulo y hare las actualizaciones necesarias para ello.
Saludos.
Excelente aporte
Me alegra ayudar Francisco 😀
Saludos.
Te juro me encantaron. Entré casualmente buscando una info puntual y he estado ya una hora leyendo los temas presentados de una forma tan interesantes y atractiva que no logro irme de su sitio…jajajaj
Felicitaciones y gracias porque me han dado ene tips muy útiles para aplicar e información necesaria para crecer y mejorar.
gracias y sigan así. Son totales!!!
Me alegra que haya sido de ayudo el blog.
Saludos.
Muchas gracias por el aporte, Diógenes. Me ha servido en mi plataforma.
Un saludo.
Me alegra ayudar 🙂
Saludos.
Hola Díogenes,
Te felicito por tu aporte y doy gracias a la misma.
saludos.
Para eso estamos amigo.
Saludos.