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 @@

Bienvenue sur theses.fr

- +
+ + + +
- +
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;