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