https://www.knowalot.org/js/back-to-top.js?v=202606082152

1/* wcms-template/js/back-to-top.js
2 *
3 * Floating "back to top" button. Self-instantiating — no markup needed in
4 * any page template. Appears at bottom-right once the visitor has scrolled
5 * past a threshold (default: 600px); click to smooth-scroll to the top.
6 *
7 * Hidden when the document is short enough that scrolling is unlikely
8 * (avoid clutter on landing pages and short articles).
9 *
10 * No-op when the user has prefers-reduced-motion: still appears, but the
11 * scroll is instant rather than animated.
12 */
13(function () {
14    'use strict';
15
16    const SCROLL_THRESHOLD = 600;     // px scrolled before the button shows
17    const MIN_DOC_HEIGHT   = 1600;    // px — pages shorter than this don't need it
18
19    function init() {
20        if (document.documentElement.scrollHeight < MIN_DOC_HEIGHT) return;
21
22        const btn = document.createElement('button');
23        btn.type = 'button';
24        btn.className = 'back-to-top';
25        btn.setAttribute('aria-label', 'Back to top');
26        btn.hidden = true;
27        // Lucide chevron-up — keep visual consistency with the rest of the site.
28        btn.innerHTML = '<svg width="20" height="20" viewBox="0 0 24 24" fill="none"'
29            + ' stroke="currentColor" stroke-width="2" stroke-linecap="round"'
30            + ' stroke-linejoin="round" aria-hidden="true" focusable="false">'
31            + '<path d="m18 15-6-6-6 6"/></svg>';
32
33        btn.addEventListener('click', function () {
34            const reduce = window.matchMedia
35                && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
36            window.scrollTo({ top: 0, behavior: reduce ? 'auto' : 'smooth' });
37        });
38
39        document.body.appendChild(btn);
40
41        // requestAnimationFrame-throttled scroll handler so the show/hide
42        // toggle isn't running on every single scroll tick.
43        let ticking = false;
44        function updateVisibility() {
45            const shouldShow = window.scrollY >= SCROLL_THRESHOLD;
46            // Toggle classes rather than the hidden attribute — gives CSS a
47            // hook for fade-in animations.
48            if (shouldShow !== btn.classList.contains('is-visible')) {
49                btn.classList.toggle('is-visible', shouldShow);
50                btn.hidden = !shouldShow;
51            }
52            ticking = false;
53        }
54        window.addEventListener('scroll', function () {
55            if (!ticking) {
56                ticking = true;
57                requestAnimationFrame(updateVisibility);
58            }
59        }, { passive: true });
60        updateVisibility();
61    }
62
63    if (document.readyState === 'loading') {
64        document.addEventListener('DOMContentLoaded', init, { once: true });
65    } else {
66        init();
67    }
68})();