From c5836dcbc1ca3e98d415fb21e86de2727147126f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= <hello@flayks.com>
Date: Tue, 7 Apr 2020 18:47:02 +0200
Subject: [PATCH] Smooth scroll to anchor without a library

Custom function using scrollIntoView with smooth behavior
---
 package.json            |  3 +--
 pnpm-lock.yaml          |  6 ------
 src/routes/index.svelte |  7 ++-----
 src/utils/functions.js  | 13 +++++++++++++
 4 files changed, 16 insertions(+), 13 deletions(-)

diff --git a/package.json b/package.json
index 4b2abd6..9c511c1 100644
--- a/package.json
+++ b/package.json
@@ -24,8 +24,7 @@
     "polka": "^1.0.0-next.9",
     "scroll-out": "^2.2.8",
     "sirv": "^0.4.2",
-    "swipe-listener": "^1.1.0",
-    "zenscroll": "^4.0.2"
+    "swipe-listener": "^1.1.0"
   },
   "devDependencies": {
     "@babel/core": "^7.9.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 6869453..c547226 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -8,7 +8,6 @@ dependencies:
   scroll-out: 2.2.8
   sirv: 0.4.2
   swipe-listener: 1.1.0
-  zenscroll: 4.0.2
 devDependencies:
   '@babel/core': 7.9.0
   '@babel/plugin-syntax-dynamic-import': 7.8.3_@babel+core@7.9.0
@@ -4850,10 +4849,6 @@ packages:
     dev: true
     resolution:
       integrity: sha1-a6MY6xaWFyf10oT46gA+jWFU0Mg=
-  /zenscroll/4.0.2:
-    dev: false
-    resolution:
-      integrity: sha1-6NV3TRwHOKR7z6hynzcS4t7d6yU=
 specifiers:
   '@babel/core': ^7.9.0
   '@babel/plugin-syntax-dynamic-import': ^7.8.3
@@ -4896,4 +4891,3 @@ specifiers:
   svelte: ^3.20.1
   svelte-preprocess: ^3.7.1
   swipe-listener: ^1.1.0
-  zenscroll: ^4.0.2
diff --git a/src/routes/index.svelte b/src/routes/index.svelte
index 62fb6b0..80e112d 100644
--- a/src/routes/index.svelte
+++ b/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>
diff --git a/src/utils/functions.js b/src/utils/functions.js
index 3e7a685..469c27e 100644
--- a/src/utils/functions.js
+++ b/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
 */