From b1492918d5e6540050e12e9e39400ceb70076c83 Mon Sep 17 00:00:00 2001
From: Mischa <mischa@gorinskat.nl>
Date: Sun, 21 Jun 2026 20:29:07 +0200
Subject: [PATCH] feat(trip): add back-to-top button

Reuses .story-totop styles. Appears after scrolling past 80% of
viewport height, smooth-scrolls to top on click.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Vgmzx8VTTTmCskSpQtsLTr
---
 themes/intotheeast/templates/trip.html.twig | 20 ++++++++++++++++++++
 1 file changed, 20 insertions(+)

diff --git a/themes/intotheeast/templates/trip.html.twig b/themes/intotheeast/templates/trip.html.twig
index 7a9ceaf..231d9d7 100644
--- a/themes/intotheeast/templates/trip.html.twig
+++ b/themes/intotheeast/templates/trip.html.twig
@@ -559,8 +559,28 @@ function parseGpxFiles(urls, callback) {
         });
     }
 })();
+
+/* ── Back to top ─────────────────────────────────────────── */
+document.addEventListener('DOMContentLoaded', function () {
+    var btn = document.getElementById('trip-totop');
+    if (!btn) return;
+    var threshold = window.innerHeight * 0.8;
+    var shown = false;
+    btn.addEventListener('click', function () {
+        window.scrollTo({ top: 0, behavior: 'smooth' });
+    });
+    window.addEventListener('scroll', function () {
+        var shouldShow = window.scrollY > threshold;
+        if (shouldShow !== shown) {
+            shown = shouldShow;
+            btn.classList.toggle('is-visible', shown);
+        }
+    }, { passive: true });
+});
 </script>
 
+<button class="story-totop" id="trip-totop" aria-label="Back to top">↑ Top</button>
+
 <script type="module">
 import PhotoSwipeLightbox from 'https://cdn.jsdelivr.net/npm/photoswipe@5/dist/photoswipe-lightbox.esm.min.js';
 const lightbox = new PhotoSwipeLightbox({