From ce14c635ee17d577aaac26257ea10c0d8c9f7562 Mon Sep 17 00:00:00 2001
From: Sambhav Saxena <76242518+sambhavsaxena@users.noreply.github.com>
Date: Tue, 30 Nov 2021 12:48:40 +0530
Subject: [PATCH] Create BackToTop.svelte

---
 src/components/BackToTop.svelte | 47 +++++++++++++++++++++++++++++++++
 1 file changed, 47 insertions(+)
 create mode 100644 src/components/BackToTop.svelte

diff --git a/src/components/BackToTop.svelte b/src/components/BackToTop.svelte
new file mode 100644
index 0000000..cb73ecc
--- /dev/null
+++ b/src/components/BackToTop.svelte
@@ -0,0 +1,47 @@
+<script>
+  export let showOnPx = 150;
+  let hidden = true;
+
+  function goTop() {
+    document.body.scrollIntoView();
+  }
+
+  function scrollContainer() {
+    return document.documentElement || document.body;
+  }
+
+  function handleOnScroll() {
+    if (!scrollContainer()) {
+      return;
+    }
+
+    if (scrollContainer().scrollTop > showOnPx) {
+      hidden = false;
+    } else {
+      hidden = true;
+    }
+  }
+</script>
+
+<style>
+  .back-to-top {
+    opacity: 1;
+    transition: opacity 0.5s, visibility 0.5s;
+    position: fixed;
+    z-index: 99;
+    right: 20px;
+    user-select: none;
+    bottom: 20px;
+    color: white;
+    background-color: black;
+  }
+
+  .back-to-top.hidden {
+    opacity: 0;
+    visibility: hidden;
+  }
+</style>
+
+<svelte:window on:scroll={handleOnScroll} />
+
+<div class="back-to-top" on:click={goTop} class:hidden>Back to top</div>