✨ Added button to scroll back to the top

ProjetProgWeb/app.js

@@ -308,6 +308,10 @@ function updateFilter(f) {
     document.querySelector('#f-' + queryOption).style.boxShadow = 'inset rgba(0, 0, 0, 0.40) 0 0 5px'
 }
 
+function scrollTop() {
+    window.scrollTo({top: 0, behavior: 'smooth'});
+}
+
 document.addEventListener('click', e => {
     if (e.target.id !== 'suggestions' && e.target !== searchBar && e.target !== searchBarButton) {
 
@@ -347,6 +351,10 @@ document.addEventListener('click', e => {
         if (e.target.id.toString().includes('f-')) {
             updateFilter(e.target.id)
         }
+
+        if (e.target.classList.contains('scroll-to-top')) {
+            scrollTop()
+        }
     }
 })
 
@@ -359,6 +367,14 @@ navbarForm.addEventListener('submit', e => {
     submitForm(0)
 })
 
+document.addEventListener('scroll', e => {
+    if (window.scrollY != 0) {
+        document.querySelector('#scrollToTop').style.display = 'block'
+    } else {
+        document.querySelector('#scrollToTop').style.display = 'none'
+    }
+})
+
 let urlSearch = urlParams.get('search')
 let urlOption = urlParams.get('option')
 let urlOffset = urlParams.get('offset')

ProjetProgWeb/index.php

@@ -39,11 +39,15 @@
             <h1 style="color:#CFCFCF;text-align: center">Bienvenue sur theses.fr</h1>
         </div>
 
-        <!-- TODO Bouton pour remonter en haut de la page -->
+        <div id="scrollToTop" class="scroll-to-top">
+            <svg class="scroll-to-top" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+                <path class="scroll-to-top" d="M23.677 18.52c.914 1.523-.183 3.472-1.967 3.472h-19.414c-1.784 0-2.881-1.949-1.967-3.472l9.709-16.18c.891-1.483 3.041-1.48 3.93 0l9.709 16.18z"/>
+            </svg>
+        </div>
 
         <div id="error">
             <div id="error-message"></div>
-            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" id="error-button">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" id="error-button">
                 <path d="M23.954 21.03l-9.184-9.095 9.092-9.174-2.832-2.807-9.09 9.179-9.176-9.088-2.81 2.81 9.186 9.105-9.095 9.184 2.81 2.81 9.112-9.192 9.18 9.1z"/>
             </svg>
         </div>

ProjetProgWeb/stylesheet.css

@@ -392,6 +392,33 @@ header {
     margin-left: auto;
 }
 
+#scrollToTop {
+    display: none;
+    position: fixed;
+    z-index: 20;
+    padding: 20px;
+    box-shadow: #302B2B33 2px 2px 10px;
+    background: #0096DC;
+    border-radius: 50%;
+    height: 60px;
+    width: 60px;
+    fill: white;
+    bottom: 25px;
+    left: 25px;
+    cursor: pointer;
+    transition: background-color 200ms, transform 200ms;
+}
+
+#scrollToTop:hover {
+    background: #1881b2;
+    transform: scale(1.05);
+}
+
+#scrollToTop svg {
+    width: 20px;
+    height: 20px;
+}
+
 .loader {
     display: none;
     width: 150px;