From 2ae935aca58ce0a12c31388e9edcc11df23fcc67 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= <hello@flayks.com>
Date: Mon, 17 Feb 2020 22:39:50 +0100
Subject: [PATCH] Smooth scroll for anchor link

---
 src/functions.js        | 14 ++++++++++++++
 src/routes/index.svelte |  2 +-
 2 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/src/functions.js b/src/functions.js
index 92a2af3..2eeac5f 100644
--- a/src/functions.js
+++ b/src/functions.js
@@ -39,6 +39,20 @@ export const isInViewport = element => {
 }
 
 
+
+/*
+** Smooth Scroll
+*/
+export const smoothScroll = (event, element = null) => {
+    document.querySelector(element).scrollIntoView({
+        behavior: 'smooth',
+        block: 'start'
+    })
+    event.preventDefault()
+}
+
+
+
 /*
 ** Random String Generator
 */
diff --git a/src/routes/index.svelte b/src/routes/index.svelte
index bf29f80..1329e21 100644
--- a/src/routes/index.svelte
+++ b/src/routes/index.svelte
@@ -99,7 +99,7 @@
         <div class="intro__description style-description">
             <p>{$site.description}</p>
 
-            <Button href="#choose" type="a" className="button" text="Explore locations">
+            <Button type="a" href="#choose" className="button" text="Explore locations" on:click={e => fn.smoothScroll(e, '#choose')}>
                 <IconGlobeSmall width="22" color="#666" />
             </Button>
         </div>