🚀 Back-to-Top Button

Back-to-Top Button für MODX 3

Bootstrap 5 + Bootswatch Spacelab

📜 JavaScript-Chunk anlegen oder das vorhandene Script um diese Funktion ergänzen

Chunkname: modxBS_JS
Back-to-Top Button wird erst ab einer definierten Scrolltiefe sichtbar (hier 800 px).

<script>
document.addEventListener('DOMContentLoaded', function () {
    const backToTop = document.querySelector('.back-to-top');
    if (!backToTop) return;

    window.addEventListener('scroll', function () {
        if (window.scrollY > 800) {
            backToTop.classList.add('show');
        } else {
            backToTop.classList.remove('show');
        }
    });

    backToTop.addEventListener('click', function () {
        window.scrollTo({
            top: 0,
            behavior: 'smooth'
        });
    });
});
</script>

🔘 Button im Haupttemplate einfügen

Der Back-to-Top Button wird am Ende des Templates direkt vor </body> platziert.
Die JS-Chunks müssen oberhalb des Buttons stehen.

Beispiel (korrekter Template-Ausschnitt):

...
[[$modxFooter]]

<!-- JS-Chunks -->
[[$modxBS_JS_ToggleSave]]
[[$modxBS_JS_BackToTop]]

<!-- Bootstrap JS -->
<script src="[[++assets_url]]bs5/bootstrap.bundle.min.js"></script>

<!-- Back-to-Top Button -->
<button type="button"
        class="btn btn-primary back-to-top"
        aria-label="Nach oben">
    ↑
</button>

🎨 CSS in tmpBS_meinStyle einfügen

.back-to-top {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    display: none;
    z-index: 1030;
    opacity: 0.9;
}

.back-to-top.show {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}