Smooth scroll to anchor without a library

Custom function using scrollIntoView with smooth behavior

src/routes/index.svelte

@@ -30,10 +30,7 @@
         currentPhotos,
         pageReady
     } from 'utils/store'
-    import { charsToSpan } from 'utils/functions'
-
-    // Dependencies
-    import zenscroll from 'zenscroll'
+    import { charsToSpan, smoothScroll } from 'utils/functions'
 
     // Components
     import Button from 'atoms/Button'
@@ -93,7 +90,7 @@
             <div class="intro__description style-description">
                 <p>{$site.description}</p>
 
-                <Button type="a" href="#choose" class="button" text="Explore locations">
+                <Button type="a" href="#choose" class="button" text="Explore locations" on:click={smoothScroll}>
                     <IconGlobeSmall width="22" color="#666" />
                 </Button>
             </div>

src/utils/functions.js

@@ -179,6 +179,19 @@ export const parallaxAnime = (element, anime) => {
 }
 
 
+/*
+** Smooth scroll to anchor on click
+*/
+export const smoothScroll = event => {
+    const link = event.target.closest('a')
+    const hash = link.getAttribute('href').split('#')[1]
+    const target = document.getElementById(hash)
+    target.scrollIntoView({ behavior: 'smooth' })
+    history.pushState({}, null, `#${hash}`)
+    event.preventDefault()
+}
+
+
 /*
 ** Google Analytics send page
 */