From 35e9c3bd7d9a9b4c424aac4d37674f206c822302 Mon Sep 17 00:00:00 2001 From: Helen Chong <119173961+helenclx@users.noreply.github.com> Date: Thu, 11 Apr 2024 23:42:11 +0800 Subject: [PATCH] Make scroll-to-top button its own WebC component --- src/_includes/main/base.njk | 8 ++---- src/_includes/main/top-btn.webc | 49 +++++++++++++++++++++++++++++++++ src/assets/css/main.css | 16 ----------- src/assets/js/scroll.js | 17 ------------ 4 files changed, 52 insertions(+), 38 deletions(-) create mode 100644 src/_includes/main/top-btn.webc delete mode 100644 src/assets/js/scroll.js diff --git a/src/_includes/main/base.njk b/src/_includes/main/base.njk index 1a88286d..661c0a6e 100644 --- a/src/_includes/main/base.njk +++ b/src/_includes/main/base.njk @@ -33,16 +33,11 @@ {# JavaScript #} - {% if toc %} {% endif %} {{ title }} | Leilukin's Hub - - {% include "main/header.njk" %} {% include "main/navbar.njk" %}
@@ -57,5 +52,8 @@ -->
{% include "main/footer.njk" %} + {% renderTemplate "webc" %} + + {% endrenderTemplate %} \ No newline at end of file diff --git a/src/_includes/main/top-btn.webc b/src/_includes/main/top-btn.webc new file mode 100644 index 00000000..e0e1da5e --- /dev/null +++ b/src/_includes/main/top-btn.webc @@ -0,0 +1,49 @@ + + + + + \ No newline at end of file diff --git a/src/assets/css/main.css b/src/assets/css/main.css index d22133dc..113877f3 100644 --- a/src/assets/css/main.css +++ b/src/assets/css/main.css @@ -229,22 +229,6 @@ dd { grid-column-start: 2; } -/* Scrool to Top Button */ -.top-btn { - position: fixed; - bottom: 20px; - right: 30px; - z-index: 999; - border: none; - background-color: var(--clr-top-btn); - border-radius: 0.2em; - padding: 0.4em; -} - -.top-btn img { - width: 1.6rem; -} - /* HEADER COMPONENT */ .main-header { width: 100%; diff --git a/src/assets/js/scroll.js b/src/assets/js/scroll.js deleted file mode 100644 index 2fec53d2..00000000 --- a/src/assets/js/scroll.js +++ /dev/null @@ -1,17 +0,0 @@ -const topButton = document.querySelector(".top-btn"); - -window.onscroll = () => { - if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) { - topButton.classList.remove("hidden"); - } else { - topButton.classList.add("hidden"); - } -} - -topButton.addEventListener('click', () => { - window.scrollTo({ - top: 0, - left: 0, - behavior: "smooth", - }); -}); \ No newline at end of file