diff --git a/resources/css/components/scroll-top.css b/resources/css/components/scroll-top.css new file mode 100644 index 0000000..baa5b25 --- /dev/null +++ b/resources/css/components/scroll-top.css @@ -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; + } +} diff --git a/resources/img/elements/carhop-arrow-up.svg b/resources/img/elements/carhop-arrow-up.svg new file mode 100644 index 0000000..4d7a7c0 --- /dev/null +++ b/resources/img/elements/carhop-arrow-up.svg @@ -0,0 +1,3 @@ + + + diff --git a/resources/js/app.ts b/resources/js/app.ts index 7f7433a..cc9bf38 100644 --- a/resources/js/app.ts +++ b/resources/js/app.ts @@ -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(); }); diff --git a/resources/js/utilities/scroll-top.ts b/resources/js/utilities/scroll-top.ts new file mode 100644 index 0000000..cfbf7b7 --- /dev/null +++ b/resources/js/utilities/scroll-top.ts @@ -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' }); + }); +} diff --git a/template-parts/utils/scroll-top.php b/template-parts/utils/scroll-top.php new file mode 100644 index 0000000..a6873e6 --- /dev/null +++ b/template-parts/utils/scroll-top.php @@ -0,0 +1,3 @@ + \ No newline at end of file