Add scroll to top button

This commit is contained in:
Helen Chong 2024-04-06 14:38:31 +08:00
parent 5783d63621
commit 8e08e3f211
10 changed files with 164 additions and 52 deletions

View File

@ -35,11 +35,16 @@
<script src="/assets/js/navbar.js" defer></script>
<script src="/assets/js/events.js" defer></script>
<script src="/assets/js/scroll.js" defer></script>
<title>About | Leilukin's Hub</title>
</head>
<body>
<button class="top-btn hidden" aria-label="Scroll to top">
<img src="/assets/images/elements/top.svg" alt="">
</button>
<header class="main-header">
<noscript>
JavaScript is disabled in your browser. To get the best user experience on

View File

@ -7,6 +7,8 @@
--clr-body-txt: #fceaff;
--clr-content-bg: #3d2163;
--clr-top-btn: #FFD05A;
--clr-main-heading: #ED64F5;
--clr-sub-heading: #e8b86f;
--clr-title-border: #d3aad5;
@ -227,32 +229,20 @@ dd {
grid-column-start: 2;
}
/* ELEMENT STYLES WITH CUSTOM CLASSES */
.bold-text {
font-weight: 700;
/* 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;
}
.center-el {
display: grid;
place-content: center;
}
.center-text {
text-align: center;
}
.date-style {
font-weight: 700;
color: var(--clr-dates);
}
.hidden {
display: none;
}
.article-list {
display: grid;
gap: 0.5em;
.top-btn img {
width: 1.6rem;
}
/* HEADER COMPONENT */
@ -325,7 +315,7 @@ dd {
as the navigation bar gets a new position at the top of the page
(position:fixed and top:0) */
.sticky-nav + main {
padding-top: 3.75rem;
padding-top: 2rem;
}
/* MAIN CONTENT */
@ -750,4 +740,32 @@ article, .content-container {
.main-footer p {
padding: 0;
}
}
/* UTILITY CLASSES */
.bold-text {
font-weight: 700;
}
.center-el {
display: grid;
place-content: center;
}
.center-text {
text-align: center;
}
.date-style {
font-weight: 700;
color: var(--clr-dates);
}
.hidden {
display: none;
}
.article-list {
display: grid;
gap: 0.5em;
}

View File

@ -0,0 +1,9 @@
<?xml version="1.0" encoding="windows-1252"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 511.189 511.189">
<g transform="matrix(1.25 0 0 -1.25 0 45)" style="fill:#40596B;">
<path d="M291.886-90.348L213.015,25.876c-6.838,10.069-17.727,9.865-24.201-0.421L116.11-89.927 c-6.474-10.286-2.048-18.705,9.842-18.705h21.311v-40.118c0-12.561,10.194-22.756,22.756-22.756h68.267 c12.584,0,22.756,10.194,22.756,22.756v40.118h21.606C294.548-108.632,298.735-100.417,291.886-90.348"/>
<path d="M40.892-234.902H15.713C4.619-234.902,0-226.801,0-218.962c0,8.078,5.78,15.929,15.713,15.929 h84.981c9.944,0,15.724-7.851,15.724-15.929c0-7.839-4.619-15.94-15.724-15.94H75.526V-350.83 c0-11.56-7.384-18.022-17.317-18.022s-17.317,6.463-17.317,18.022L40.892-234.902z"/>
<path d="M240.447-285.249c0,27.944-14.552,53.134-43.418,53.134c-28.877,0-43.429-25.19-43.429-53.134 c0-28.171,14.097-53.111,43.429-53.111S240.447-313.42,240.447-285.249 M117.578-285.249c0,48.037,32.324,85.003,79.451,85.003 c46.41,0,79.44-38.127,79.44-85.003c0-47.798-32.097-85.003-79.44-85.003C150.141-370.252,117.578-333.047,117.578-285.249"/>
<path d="M325.586-282.473h23.563c14.541,0,23.768,10.627,23.768,24.474 c0,13.87-9.227,24.496-23.768,24.496h-23.563V-282.473z M290.93-221.044c0,10.866,6.474,18,18.034,18h40.858 c33.963,0,59.13-22.153,59.13-55.182c0-33.712-26.089-54.738-57.731-54.738h-25.634v-37.877c0-11.548-7.384-18.022-17.306-18.022 c-9.956,0-17.351,6.474-17.351,18.022V-221.044z"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.6 KiB

View File

@ -0,0 +1,9 @@
<?xml version="1.0" encoding="windows-1252"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 511.189 511.189">
<g transform="matrix(1.25 0 0 -1.25 0 45)" style="fill:#40596B;">
<path d="M291.886-90.348L213.015,25.876c-6.838,10.069-17.727,9.865-24.201-0.421L116.11-89.927 c-6.474-10.286-2.048-18.705,9.842-18.705h21.311v-40.118c0-12.561,10.194-22.756,22.756-22.756h68.267 c12.584,0,22.756,10.194,22.756,22.756v40.118h21.606C294.548-108.632,298.735-100.417,291.886-90.348"/>
<path d="M40.892-234.902H15.713C4.619-234.902,0-226.801,0-218.962c0,8.078,5.78,15.929,15.713,15.929 h84.981c9.944,0,15.724-7.851,15.724-15.929c0-7.839-4.619-15.94-15.724-15.94H75.526V-350.83 c0-11.56-7.384-18.022-17.317-18.022s-17.317,6.463-17.317,18.022L40.892-234.902z"/>
<path d="M240.447-285.249c0,27.944-14.552,53.134-43.418,53.134c-28.877,0-43.429-25.19-43.429-53.134 c0-28.171,14.097-53.111,43.429-53.111S240.447-313.42,240.447-285.249 M117.578-285.249c0,48.037,32.324,85.003,79.451,85.003 c46.41,0,79.44-38.127,79.44-85.003c0-47.798-32.097-85.003-79.44-85.003C150.141-370.252,117.578-333.047,117.578-285.249"/>
<path d="M325.586-282.473h23.563c14.541,0,23.768,10.627,23.768,24.474 c0,13.87-9.227,24.496-23.768,24.496h-23.563V-282.473z M290.93-221.044c0,10.866,6.474,18,18.034,18h40.858 c33.963,0,59.13-22.153,59.13-55.182c0-33.712-26.089-54.738-57.731-54.738h-25.634v-37.877c0-11.548-7.384-18.022-17.306-18.022 c-9.956,0-17.351,6.474-17.351,18.022V-221.044z"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.6 KiB

17
_site/assets/js/scroll.js Normal file
View File

@ -0,0 +1,17 @@
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",
});
});

View File

@ -35,11 +35,16 @@
<script src="/assets/js/navbar.js" defer></script>
<script src="/assets/js/events.js" defer></script>
<script src="/assets/js/scroll.js" defer></script>
<title>Home | Leilukin's Hub</title>
</head>
<body>
<button class="top-btn hidden" aria-label="Scroll to top">
<img src="/assets/images/elements/top.svg" alt="">
</button>
<header class="main-header">
<noscript>
JavaScript is disabled in your browser. To get the best user experience on

View File

@ -30,11 +30,16 @@
{# JavaScript #}
<script src="/assets/js/navbar.js" defer></script>
<script src="/assets/js/events.js" defer></script>
<script src="/assets/js/scroll.js" defer></script>
{% if toc %} <script src="/assets/js/toc.js" defer></script> {% endif %}
<title>{{ title }} | Leilukin's Hub</title>
</head>
<body>
<button class="top-btn hidden" aria-label="Scroll to top">
<img src="/assets/images/elements/top.svg" alt="">
</button>
{% include "components/header.njk" %}
{% include "components/navbar.njk" %}
<main>

View File

@ -7,6 +7,8 @@
--clr-body-txt: #fceaff;
--clr-content-bg: #3d2163;
--clr-top-btn: #FFD05A;
--clr-main-heading: #ED64F5;
--clr-sub-heading: #e8b86f;
--clr-title-border: #d3aad5;
@ -227,32 +229,20 @@ dd {
grid-column-start: 2;
}
/* ELEMENT STYLES WITH CUSTOM CLASSES */
.bold-text {
font-weight: 700;
/* 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;
}
.center-el {
display: grid;
place-content: center;
}
.center-text {
text-align: center;
}
.date-style {
font-weight: 700;
color: var(--clr-dates);
}
.hidden {
display: none;
}
.article-list {
display: grid;
gap: 0.5em;
.top-btn img {
width: 1.6rem;
}
/* HEADER COMPONENT */
@ -325,7 +315,7 @@ dd {
as the navigation bar gets a new position at the top of the page
(position:fixed and top:0) */
.sticky-nav + main {
padding-top: 3.75rem;
padding-top: 2rem;
}
/* MAIN CONTENT */
@ -750,4 +740,32 @@ article, .content-container {
.main-footer p {
padding: 0;
}
}
/* UTILITY CLASSES */
.bold-text {
font-weight: 700;
}
.center-el {
display: grid;
place-content: center;
}
.center-text {
text-align: center;
}
.date-style {
font-weight: 700;
color: var(--clr-dates);
}
.hidden {
display: none;
}
.article-list {
display: grid;
gap: 0.5em;
}

View File

@ -0,0 +1,9 @@
<?xml version="1.0" encoding="windows-1252"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 511.189 511.189">
<g transform="matrix(1.25 0 0 -1.25 0 45)" style="fill:#40596B;">
<path d="M291.886-90.348L213.015,25.876c-6.838,10.069-17.727,9.865-24.201-0.421L116.11-89.927 c-6.474-10.286-2.048-18.705,9.842-18.705h21.311v-40.118c0-12.561,10.194-22.756,22.756-22.756h68.267 c12.584,0,22.756,10.194,22.756,22.756v40.118h21.606C294.548-108.632,298.735-100.417,291.886-90.348"/>
<path d="M40.892-234.902H15.713C4.619-234.902,0-226.801,0-218.962c0,8.078,5.78,15.929,15.713,15.929 h84.981c9.944,0,15.724-7.851,15.724-15.929c0-7.839-4.619-15.94-15.724-15.94H75.526V-350.83 c0-11.56-7.384-18.022-17.317-18.022s-17.317,6.463-17.317,18.022L40.892-234.902z"/>
<path d="M240.447-285.249c0,27.944-14.552,53.134-43.418,53.134c-28.877,0-43.429-25.19-43.429-53.134 c0-28.171,14.097-53.111,43.429-53.111S240.447-313.42,240.447-285.249 M117.578-285.249c0,48.037,32.324,85.003,79.451,85.003 c46.41,0,79.44-38.127,79.44-85.003c0-47.798-32.097-85.003-79.44-85.003C150.141-370.252,117.578-333.047,117.578-285.249"/>
<path d="M325.586-282.473h23.563c14.541,0,23.768,10.627,23.768,24.474 c0,13.87-9.227,24.496-23.768,24.496h-23.563V-282.473z M290.93-221.044c0,10.866,6.474,18,18.034,18h40.858 c33.963,0,59.13-22.153,59.13-55.182c0-33.712-26.089-54.738-57.731-54.738h-25.634v-37.877c0-11.548-7.384-18.022-17.306-18.022 c-9.956,0-17.351,6.474-17.351,18.022V-221.044z"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.6 KiB

17
src/assets/js/scroll.js Normal file
View File

@ -0,0 +1,17 @@
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",
});
});