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
No edit summary
 
(4 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
document.addEventListener("DOMContentLoaded", function () {
    const backToTopButton = document.createElement("div");
    backToTopButton.id = "backToTop";
    backToTopButton.textContent = "↑"; // Flecha hacia arriba
    backToTopButton.onclick = scrollToTop;
    document.body.appendChild(backToTopButton);
});


function scrollFunction() {
// Función para volver al inicio
  if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
function scrollToTop() {
    document.getElementById("navbar").className = "scrolled";
    window.scrollTo({
  } else {
        top: 0,
    document.getElementById("navbar").className = "";
        behavior: "smooth" // Desplazamiento suave
  }
    });
}
}


document.getElementById('scrollTop').addEventListener('click', () => {
// Mostrar el botón al hacer scroll hacia abajo
     window.scrollTo({ top: 0, behavior: 'smooth' });
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 + '%';
    });
});
});

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 + '%';
    });
});