Use options parameters with types and default on smoothScroll function

src/components/molecules/Poster.svelte

@@ -36,7 +36,7 @@
             size="xsmall"
             url="/shop/poster-{location.slug}"
             text="View"
-            on:click={() => setTimeout(() => smoothScroll('poster', false), 1000)}
+            on:click={() => setTimeout(() => smoothScroll({ hash: 'poster', changeHash: false }), 1000)}
         />
         <Button
             tag="button"

src/components/molecules/ShopLocationSwitcher.svelte

@@ -24,7 +24,7 @@
         const newPath = `/shop/poster-${value}`
         goto(newPath, { replaceState: true, noscroll: true, keepfocus: true })
         // Scroll to anchor
-        setTimeout(() => smoothScroll('poster'), 1000)
+        setTimeout(() => smoothScroll({ hash: 'poster' }), 1000)
     }
 </script>
 

src/components/organisms/ShopHeader.svelte

@@ -107,7 +107,7 @@
                 <ul>
                     {#each shopLocations as { name, slug }}
                         <li class:is-active={product && slug === product.location.slug}>
-                            <a href="/shop/poster-{slug}" on:click={() => smoothScroll('poster')} sveltekit:prefetch sveltekit:noscroll>
+                            <a href="/shop/poster-{slug}" on:click={() => smoothScroll({ hash: 'poster' })} sveltekit:prefetch sveltekit:noscroll>
                                 {name}
                             </a>
                         </li>

src/routes/index.svelte

@@ -95,7 +95,7 @@
                 {settings.description}
             </p>
 
-            <Button url="#locations" text="Explore locations" on:click={() => smoothScroll('locations')}>
+            <Button url="#locations" text="Explore locations" on:click={event => smoothScroll({ hash: 'locations', event })}>
                 <IconEarth animate={true} />
             </Button>
         </div>

src/utils/functions/index.ts

@@ -158,7 +158,7 @@ export const scrollToTop = (delay?: number) => {
 /**
  * Smooth Scroll to an element
  * @description Promised based
- * @url https://www.youtube.com/watch?v=oUSvlrDTLi4
+ * @url Based on: https://www.youtube.com/watch?v=oUSvlrDTLi4
  */
 const smoothScrollPromise = (target: HTMLElement, duration: number = 1600): Promise<void> => {
     const position = target.getBoundingClientRect().top + 1
@@ -190,13 +190,19 @@ const smoothScrollPromise = (target: HTMLElement, duration: number = 1600): Prom
         requestAnimationFrame(animation)
     })
 }
-export const smoothScroll = async (hash: string, changeHash: boolean = true, callback?: Function) => {
+export const smoothScroll = async ({ hash, callback, changeHash = true, event }: smoothScrollOptions) => {
+    if (event) event.preventDefault()
+
     const target = document.getElementById(hash)
 
     smoothScrollPromise(target).then(() => {
-        if (changeHash) {
-            location.hash = hash
-        }
+        if (changeHash) location.hash = hash
         callback && callback()
     })
+}
+type smoothScrollOptions = {
+    hash: string
+    changeHash?: boolean
+    event?: MouseEvent
+    callback?: Function
 }