Cómo crear un Botón Ir Arriba (Back to top) en Moodle

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.

¿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.

Agregando un botón Ir arriba en Moodle

Para hacer nuestro botón Back to top, tenemos tres pasos por hacer:

1. Crear un archivo .js que contiene el código Javascript.
2. Agregar el código HTML para que se muestre.
3. 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.

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.

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.