Antoine/carhop__carhop-theme__DEV
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

FEATURE Implementing scroll top component

Browse Source
This commit is contained in:
Antoine M 2025-09-30 15:18:36 +02:00
parent bb5d011d3b
commit 04767c1e3f
5 changed files with 23 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
resources/css/components/scroll-top.css Normal file
View File

@ -0,0 +1,7 @@
button#scroll-top {
@apply fixed lg:bottom-8 lg:right-12 bottom-4 right-4 bg-white border-2 border-solid border-primary text-primary rounded-full p-4 z-50;
img {
@apply h-6 w-6;
}
}

3
resources/img/elements/carhop-arrow-up.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="37" height="19" viewBox="0 0 37 19" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M35.5 18.15L18.9689 2.00003L1.5 18.15" stroke="#136F63" stroke-width="2"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 187 B

3
resources/js/app.ts
View File

@ -1,7 +1,8 @@
import menuInit from './header';
import initFooterShapes from './footer';
import handleScrollTop from './utilities/scroll-top';
window.addEventListener('load', function () {
// menuInit();
initFooterShapes();
handleScrollTop();
});

8
resources/js/utilities/scroll-top.ts Normal file
View File

@ -0,0 +1,8 @@
export default function handleScrollTop() {
const scrollTopButton = document.getElementById('scroll-top');
if (!scrollTopButton) return;
scrollTopButton.addEventListener('click', () => {
window.scrollTo({ top: 0, behavior: 'smooth' });
});
}

3
template-parts/utils/scroll-top.php Normal file
View File

@ -0,0 +1,3 @@
<button id="scroll-top" class="animate-hover-top">
<img src="<?php echo get_stylesheet_directory_uri(); ?>/resources/img/elements/carhop-arrow-up.svg" alt="Remonter en haut de la page">
</button>