Como 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 como 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.

ejemplo de boton ir arriba

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:

  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.

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.

crear carpeta javascript en tema moodle

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.

código php en botón back to top moodle
Esta imagen es referencial, puede variar de acuerdo a tu tema
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.

código html para botón ir arriba moodle

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.

código css para botón back to top moodle

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 Advanced settings.

Coloca el código CSS que te mostré anteriormente en el campo Raw SCSS.

código css para botón back to top en tema boost moodle

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 :mrgreen: .

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.

Califica este artículo

Puntuación promedio 4 / 5. Votos: 4

No hay votos hasta ahora. Sé el primero en calificar esta publicación.

Foto del autor
Fundador de VivaBlogger y cofundador de EVirtualplus. Soy un tecnomaniaco desde que estaba en pañales. Mi familia es el fundamento de mi vida. Sígueme en mis redes sociales.

También te puede interesar

14 comentarios en «Como crear un Botón Ir Arriba (Back to top) en Moodle»

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

    Responder
    • 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.

      Responder
      • 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

        Responder
  2. 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.

    Responder
    • 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.

      Responder
  3. 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!!!

    Responder

Deja un comentario

El responsable de este sitio web es Marit Acuña. La finalidad de los datos es gestionar los comentarios en este blog. El destinatario (donde se almacenan los datos) es el hosting de este blog: Banahosting, ubicado en EEUU. La legitimidad es el consentimiento que otorgas en el formulario. Tienes derecho a acceder, rectificar, limitar y suprimir tus datos según la política de privacidad.