Toggle menu
Toggle personal menu
Not logged in
Your IP address will be publicly visible if you make any edits.

MediaWiki:Common.js: Difference between revisions

MediaWiki interface page
No edit summary
Tag: Reverted
No edit summary
 
(2 intermediate revisions by the same user not shown)
Line 1: Line 1:
/* Any JavaScript here will be loaded for all users on every page load. */
/* Any JavaScript here will be loaded for all users on every page load. */


window.onscroll = function() {scrollFunction()};
// Crear y agregar el botón flotante al cargar la página
 
function scrollFunction() {
  if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
    document.getElementById("navbar").className = "scrolled";
  } else {
    document.getElementById("navbar").className = "";
  }
}
 
document.getElementById('scrollTop').addEventListener('click', () => {
    window.scrollTo({ top: 0, behavior: 'smooth' });
});
 
/* Crear y agregar el botón flotante al cargar la página /*
document.addEventListener("DOMContentLoaded", function () {
document.addEventListener("DOMContentLoaded", function () {
     const backToTopButton = document.createElement("div");
     const backToTopButton = document.createElement("div");
Line 24: Line 10:
});
});


/* Función para volver al inicio /*
// Función para volver al inicio
function scrollToTop() {
function scrollToTop() {
     window.scrollTo({
     window.scrollTo({
Line 32: Line 18:
}
}


/* Mostrar el botón al hacer scroll hacia abajo /*
// Mostrar el botón al hacer scroll hacia abajo
window.addEventListener("scroll", function () {
window.addEventListener("scroll", function () {
     const backToTopButton = document.getElementById("backToTop");
     const backToTopButton = document.getElementById("backToTop");
Line 40: Line 26:
         backToTopButton.classList.remove("show");
         backToTopButton.classList.remove("show");
     }
     }
});
document.addEventListener('DOMContentLoaded', function () {
    // Crear los elementos de la barra de lectura
    const progressBarContainer = document.createElement('div');
    progressBarContainer.className = 'reading-progress-bar-container';
    const progressBar = document.createElement('div');
    progressBar.className = 'reading-progress-bar';
    progressBarContainer.appendChild(progressBar);
    // Añadir la barra al cuerpo del documento
    document.body.appendChild(progressBarContainer);
    // Actualizar la barra en función del scroll
    window.addEventListener('scroll', function () {
        const article = document.querySelector('.mw-parser-output'); // Selector principal del contenido
        if (!article) return;
        const articleHeight = article.offsetHeight;
        const articleTop = article.getBoundingClientRect().top;
        const windowHeight = window.innerHeight;
        const maxScroll = articleHeight - windowHeight;
        const scroll = Math.min(Math.max(-articleTop, 0), maxScroll);
        const progress = (scroll / maxScroll) * 100;
        progressBar.style.width = progress + '%';
    });
});
});

Latest revision as of 20:03, 16 November 2024

/* Any JavaScript here will be loaded for all users on every page load. */

// Crear y agregar el botón flotante al cargar la página
document.addEventListener("DOMContentLoaded", function () {
    const backToTopButton = document.createElement("div");
    backToTopButton.id = "backToTop";
    backToTopButton.textContent = "↑"; // Flecha hacia arriba
    backToTopButton.onclick = scrollToTop;
    document.body.appendChild(backToTopButton);
});

// Función para volver al inicio
function scrollToTop() {
    window.scrollTo({
        top: 0,
        behavior: "smooth" // Desplazamiento suave
    });
}

// Mostrar el botón al hacer scroll hacia abajo
window.addEventListener("scroll", function () {
    const backToTopButton = document.getElementById("backToTop");
    if (window.scrollY > 200) {
        backToTopButton.classList.add("show");
    } else {
        backToTopButton.classList.remove("show");
    }
});

document.addEventListener('DOMContentLoaded', function () {
    // Crear los elementos de la barra de lectura
    const progressBarContainer = document.createElement('div');
    progressBarContainer.className = 'reading-progress-bar-container';

    const progressBar = document.createElement('div');
    progressBar.className = 'reading-progress-bar';
    progressBarContainer.appendChild(progressBar);

    // Añadir la barra al cuerpo del documento
    document.body.appendChild(progressBarContainer);

    // Actualizar la barra en función del scroll
    window.addEventListener('scroll', function () {
        const article = document.querySelector('.mw-parser-output'); // Selector principal del contenido
        if (!article) return;

        const articleHeight = article.offsetHeight;
        const articleTop = article.getBoundingClientRect().top;
        const windowHeight = window.innerHeight;

        const maxScroll = articleHeight - windowHeight;
        const scroll = Math.min(Math.max(-articleTop, 0), maxScroll);

        const progress = (scroll / maxScroll) * 100;
        progressBar.style.width = progress + '%';
    });
});