ajout d'un bouton retour en haut de page

albums.php

@@ -114,6 +114,16 @@ $config = getSiteConfig();
         });
     });
     </script>
+    <button class="scroll-top" title="Retour en haut">↑</button>
+    <script>
+    const scrollBtn = document.querySelector('.scroll-top');
+    window.addEventListener('scroll', () => {
+        scrollBtn.style.display = window.scrollY > 500 ? 'flex' : 'none';
+    });
+    scrollBtn.addEventListener('click', () => {
+        window.scrollTo({ top: 0, behavior: 'smooth' });
+    });
+    </script>
     <?php include 'footer.php'; ?>
 </body>
 </html>

arbre-img-prive.php

@@ -292,6 +292,16 @@ $config = getSiteConfig();
         }
     });
     </script>
+    <button class="scroll-top" title="Retour en haut">↑</button>
+    <script>
+    const scrollBtn = document.querySelector('.scroll-top');
+    window.addEventListener('scroll', () => {
+        scrollBtn.style.display = window.scrollY > 500 ? 'flex' : 'none';
+    });
+    scrollBtn.addEventListener('click', () => {
+        window.scrollTo({ top: 0, behavior: 'smooth' });
+    });
+    </script>
     <?php include 'footer.php'; ?>
 </body>
 </html>

arbre-img.php

@@ -667,7 +667,16 @@ $config = getSiteConfig();
         }
     });
     </script>
-
+    <button class="scroll-top" title="Retour en haut">↑</button>
+    <script>
+    const scrollBtn = document.querySelector('.scroll-top');
+    window.addEventListener('scroll', () => {
+        scrollBtn.style.display = window.scrollY > 500 ? 'flex' : 'none';
+    });
+    scrollBtn.addEventListener('click', () => {
+        window.scrollTo({ top: 0, behavior: 'smooth' });
+    });
+    </script>
     <?php include 'footer.php'; ?>
 </body>
 </html>

arbre-prive.php

@@ -433,6 +433,16 @@ $config = getSiteConfig();
     }, 2000);
     }
     </script>
+    <button class="scroll-top" title="Retour en haut">↑</button>
+    <script>
+    const scrollBtn = document.querySelector('.scroll-top');
+    window.addEventListener('scroll', () => {
+        scrollBtn.style.display = window.scrollY > 500 ? 'flex' : 'none';
+    });
+    scrollBtn.addEventListener('click', () => {
+        window.scrollTo({ top: 0, behavior: 'smooth' });
+    });
+    </script>
     <?php include 'footer.php'; ?>
 </body>
 </html>

arbre.php

@@ -352,6 +352,16 @@ $config = getSiteConfig();
         }
     }
     </script>
+    <button class="scroll-top" title="Retour en haut">↑</button>
+    <script>
+    const scrollBtn = document.querySelector('.scroll-top');
+    window.addEventListener('scroll', () => {
+        scrollBtn.style.display = window.scrollY > 500 ? 'flex' : 'none';
+    });
+    scrollBtn.addEventListener('click', () => {
+        window.scrollTo({ top: 0, behavior: 'smooth' });
+    });
+    </script>
     <?php include 'footer.php'; ?>
 </body>
 </html>

clefs.php

@@ -242,6 +242,16 @@ $config = getSiteConfig();
         window.location.href = url;
     }
     </script>
+    <button class="scroll-top" title="Retour en haut">↑</button>
+    <script>
+    const scrollBtn = document.querySelector('.scroll-top');
+    window.addEventListener('scroll', () => {
+        scrollBtn.style.display = window.scrollY > 500 ? 'flex' : 'none';
+    });
+    scrollBtn.addEventListener('click', () => {
+        window.scrollTo({ top: 0, behavior: 'smooth' });
+    });
+    </script>
     <?php include 'footer.php'; ?>
 </body>
 </html>

galeries-privees.php

@@ -170,6 +170,16 @@ $config = getSiteConfig();
     }
     </script>
     <?php endif; ?>
+    <button class="scroll-top" title="Retour en haut">↑</button>
+    <script>
+    const scrollBtn = document.querySelector('.scroll-top');
+    window.addEventListener('scroll', () => {
+        scrollBtn.style.display = window.scrollY > 500 ? 'flex' : 'none';
+    });
+    scrollBtn.addEventListener('click', () => {
+        window.scrollTo({ top: 0, behavior: 'smooth' });
+    });
+    </script>
     <?php include 'footer.php'; ?>
 </body>
 </html>

galeries.php

@@ -143,6 +143,16 @@ $config = getSiteConfig();
        }
    }
    </script>
+    <button class="scroll-top" title="Retour en haut">↑</button>
+    <script>
+    const scrollBtn = document.querySelector('.scroll-top');
+    window.addEventListener('scroll', () => {
+        scrollBtn.style.display = window.scrollY > 500 ? 'flex' : 'none';
+    });
+    scrollBtn.addEventListener('click', () => {
+        window.scrollTo({ top: 0, behavior: 'smooth' });
+    });
+    </script>
    <?php include 'footer.php'; ?>
 </body>
 </html>

styles.css

@@ -635,6 +635,38 @@ body {
     font-size: 0.8rem;
 }
 
+.scroll-top {
+    position: fixed;
+    bottom: 3rem;
+    right: 2rem;
+    width: 3rem;
+    height: 3rem;
+    background: rgba(33, 150, 243, 0.8);
+    border-radius: 50%;
+    border: none;
+    cursor: pointer;
+    display: none;
+    align-items: center;
+    justify-content: center;
+    color: white;
+    font-size: 1.5rem;
+    z-index: 99;
+    transition: all 0.3s ease;
+    backdrop-filter: blur(4px);
+}
+
+.scroll-top:hover {
+    background: rgba(33, 150, 243, 1);
+    transform: translateY(-3px);
+}
+
+@media (max-width: 768px) {
+    .scroll-top {
+        bottom: 5rem;
+        right: 1rem;
+    }
+}
+
 .gallery-grid,
 .albums-grid,
 .admin-content {

utilisateurs.php

@@ -362,6 +362,16 @@ $config = getSiteConfig();
         }
     }
     </script>
+    <button class="scroll-top" title="Retour en haut">↑</button>
+    <script>
+    const scrollBtn = document.querySelector('.scroll-top');
+    window.addEventListener('scroll', () => {
+        scrollBtn.style.display = window.scrollY > 500 ? 'flex' : 'none';
+    });
+    scrollBtn.addEventListener('click', () => {
+        window.scrollTo({ top: 0, behavior: 'smooth' });
+    });
+    </script>
     <?php include 'footer.php'; ?>
 </body>
 </html>