From 730e2a2b3a09419c78383caa455c97a35319caca Mon Sep 17 00:00:00 2001
From: Florian SYLVAIN <f.salututo@gmail.com>
Date: Sat, 8 Jan 2022 15:17:22 +0100
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Added=20button=20to=20scroll=20back?=
 =?UTF-8?q?=20to=20the=20top?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ProjetProgWeb/app.js         | 16 ++++++++++++++++
 ProjetProgWeb/index.php      |  8 ++++++--
 ProjetProgWeb/stylesheet.css | 27 +++++++++++++++++++++++++++
 3 files changed, 49 insertions(+), 2 deletions(-)

diff --git a/ProjetProgWeb/app.js b/ProjetProgWeb/app.js
index 4676e92..b49ebda 100644
--- a/ProjetProgWeb/app.js
+++ b/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')
diff --git a/ProjetProgWeb/index.php b/ProjetProgWeb/index.php
index a5ad81d..e021fae 100644
--- a/ProjetProgWeb/index.php
+++ b/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>
diff --git a/ProjetProgWeb/stylesheet.css b/ProjetProgWeb/stylesheet.css
index 405cfec..3d3d482 100644
--- a/ProjetProgWeb/stylesheet.css
+++ b/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;