feat: click to top (#84)

4 files changed, 68 insertions, 1 deletions

diff --git a/_includes/extensions/click-to-top.html b/_includes/extensions/click-to-top.html
new file mode 100644
index 0000000..fadd325
--- /dev/null
+++ b/_includes/extensions/click-to-top.html
@@ -0,0 +1,18 @@
+<div id="click-to-top" class="click-to-top">
+  <i class="fa fa-arrow-up"></i>
+</div>
+<script>
+  (function () {
+    const clickToTop = document.getElementById('click-to-top');
+    window.addEventListener('scroll', () => {
+      if (window.scrollY > 100) {
+        clickToTop.classList.add('show')
+      }else {
+        clickToTop.classList.remove('show')
+      }
+    });
+    clickToTop.addEventListener('click', () => {
+      window.smoothScrollTo(0);
+    });
+  })();
+</script>
diff --git a/_layouts/default.html b/_layouts/default.html
index b9ad657..f8e8e6b 100644
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -13,6 +13,8 @@
 
     {%- include extensions/theme-toggle.html -%}
 
+    {%- include extensions/click-to-top.html -%}
+
     <main class="page-content" aria-label="Content">
       <div class="wrapper">
         {{ content }}
diff --git a/_sass/misc/click-to-top.scss b/_sass/misc/click-to-top.scss
new file mode 100644
index 0000000..00f543c
--- /dev/null
+++ b/_sass/misc/click-to-top.scss
@@ -0,0 +1,46 @@
+.click-to-top {
+  transition: 0.3s;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: fixed;
+  width: 64px;
+  height: 64px;
+  border-radius: 32px;
+  right: 60px;
+  bottom: 48px;
+  background: white;
+  cursor: pointer;
+  opacity: 0;
+  transform: translateY(10px);
+  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.15);
+  font-size: 24px;
+  user-select: none;
+
+  @include media-query(1024px) {
+    width: 48px;
+    height: 48px;
+    border-radius: 24px;
+    right: 35px;
+    font-size: 20px;
+  }
+
+  @include media-query($on-palm) {
+    width: 36px;
+    height: 36px;
+    border-radius: 18px;
+    right: 20px;
+    font-size: 16px;
+  }
+}
+
+.click-to-top.show {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+html[data-theme="dark"] {
+  .click-to-top {
+    background: #34323D;
+  }
+}
diff --git a/_sass/yat.scss b/_sass/yat.scss
index 5d1a631..eda2d97 100644
--- a/_sass/yat.scss
+++ b/_sass/yat.scss
@@ -65,5 +65,6 @@ $on-laptop:        800px !default;
   "misc/article-menu",
   "misc/common-list",
   "misc/google-translate",
-  "misc/gitment"
+  "misc/gitment",
+  "misc/click-to-top"
 ;