✨ Use smooth scroll function to navigate to anchor

Using a eased RAF function to scroll to a specific target
Avoid using `scrollIntoView` or smooth behavior as it doesn't work on Safari and others.

src/components/molecules/Poster.svelte

@@ -5,6 +5,7 @@
 <script lang="ts">
     import { cartId } from '$utils/stores/shop'
     import { addToCart } from '$utils/functions/shop'
+    import { smoothScroll } from '$utils/functions'
     // Components
     import Button from '$components/atoms/Button.svelte'
     import Image from '$components/atoms/Image.svelte'
@@ -16,7 +17,7 @@
 
 <div class="poster">
     {#if image}
-        <a href="/shop/poster-{location.slug}#poster" sveltekit:noscroll sveltekit:prefetch>
+        <a href="/shop/poster-{location.slug}" on:click={() => smoothScroll('poster', false)} sveltekit:noscroll sveltekit:prefetch>
             <Image
                 id={image.id}
                 sizeKey="product"
@@ -33,15 +34,16 @@
     <div class="buttons">
         <Button
             size="xsmall"
-            url="/shop/poster-{location.slug}#poster"
+            url="/shop/poster-{location.slug}"
             text="View"
+            on:click={() => setTimeout(() => smoothScroll('poster', false), 1000)}
         />
         <Button
             tag="button"
             size="xsmall"
-            on:click={() => addToCart($cartId, product)}
             text="Add to cart"
             color="pink"
+            on:click={() => addToCart($cartId, product)}
         />
     </div>
 </div>

src/components/molecules/ShopLocationSwitcher.svelte

@@ -6,6 +6,7 @@
     import { goto } from '$app/navigation'
     import { getContext } from 'svelte'
     import { shopCurrentProductSlug } from '$utils/stores/shop'
+    import { smoothScroll } from '$utils/functions'
 
     export let isOver: boolean = false
 
@@ -22,6 +23,8 @@
     const quickLocationChange = ({ target: { value }}: any) => {
         const newPath = `/shop/poster-${value}`
         goto(newPath, { replaceState: true, noscroll: true, keepfocus: true })
+        // Scroll to anchor
+        setTimeout(() => smoothScroll('poster'), 1000)
     }
 </script>