Add scroll to top button
This commit is contained in:
Helen Chong
parent
5783d63621
commit
8e08e3f211
|
|
@ -35,11 +35,16 @@
|
||||||
|
|
||||||
<script src="/assets/js/navbar.js" defer></script>
|
<script src="/assets/js/navbar.js" defer></script>
|
||||||
<script src="/assets/js/events.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>
|
<title>About | Leilukin's Hub</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
<button class="top-btn hidden" aria-label="Scroll to top">
|
||||||
|
<img src="/assets/images/elements/top.svg" alt="">
|
||||||
|
</button>
|
||||||
|
|
||||||
<header class="main-header">
|
<header class="main-header">
|
||||||
<noscript>
|
<noscript>
|
||||||
JavaScript is disabled in your browser. To get the best user experience on
|
JavaScript is disabled in your browser. To get the best user experience on
|
||||||
|
|
|
||||||
|
|
@ -7,6 +7,8 @@
|
||||||
--clr-body-txt: #fceaff;
|
--clr-body-txt: #fceaff;
|
||||||
--clr-content-bg: #3d2163;
|
--clr-content-bg: #3d2163;
|
||||||
|
|
||||||
|
--clr-top-btn: #FFD05A;
|
||||||
|
|
||||||
--clr-main-heading: #ED64F5;
|
--clr-main-heading: #ED64F5;
|
||||||
--clr-sub-heading: #e8b86f;
|
--clr-sub-heading: #e8b86f;
|
||||||
--clr-title-border: #d3aad5;
|
--clr-title-border: #d3aad5;
|
||||||
|
|
@ -227,32 +229,20 @@ dd {
|
||||||
grid-column-start: 2;
|
grid-column-start: 2;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ELEMENT STYLES WITH CUSTOM CLASSES */
|
/* Scrool to Top Button */
|
||||||
.bold-text {
|
.top-btn {
|
||||||
font-weight: 700;
|
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 {
|
.top-btn img {
|
||||||
display: grid;
|
width: 1.6rem;
|
||||||
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;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* HEADER COMPONENT */
|
/* HEADER COMPONENT */
|
||||||
|
|
@ -325,7 +315,7 @@ dd {
|
||||||
as the navigation bar gets a new position at the top of the page
|
as the navigation bar gets a new position at the top of the page
|
||||||
(position:fixed and top:0) */
|
(position:fixed and top:0) */
|
||||||
.sticky-nav + main {
|
.sticky-nav + main {
|
||||||
padding-top: 3.75rem;
|
padding-top: 2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* MAIN CONTENT */
|
/* MAIN CONTENT */
|
||||||
|
|
@ -751,3 +741,31 @@ article, .content-container {
|
||||||
.main-footer p {
|
.main-footer p {
|
||||||
padding: 0;
|
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;
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -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 |
|
|
@ -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 |
|
|
@ -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",
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
@ -35,11 +35,16 @@
|
||||||
|
|
||||||
<script src="/assets/js/navbar.js" defer></script>
|
<script src="/assets/js/navbar.js" defer></script>
|
||||||
<script src="/assets/js/events.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>
|
<title>Home | Leilukin's Hub</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
<button class="top-btn hidden" aria-label="Scroll to top">
|
||||||
|
<img src="/assets/images/elements/top.svg" alt="">
|
||||||
|
</button>
|
||||||
|
|
||||||
<header class="main-header">
|
<header class="main-header">
|
||||||
<noscript>
|
<noscript>
|
||||||
JavaScript is disabled in your browser. To get the best user experience on
|
JavaScript is disabled in your browser. To get the best user experience on
|
||||||
|
|
|
||||||
|
|
@ -30,11 +30,16 @@
|
||||||
{# JavaScript #}
|
{# JavaScript #}
|
||||||
<script src="/assets/js/navbar.js" defer></script>
|
<script src="/assets/js/navbar.js" defer></script>
|
||||||
<script src="/assets/js/events.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 %}
|
{% if toc %} <script src="/assets/js/toc.js" defer></script> {% endif %}
|
||||||
|
|
||||||
<title>{{ title }} | Leilukin's Hub</title>
|
<title>{{ title }} | Leilukin's Hub</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<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/header.njk" %}
|
||||||
{% include "components/navbar.njk" %}
|
{% include "components/navbar.njk" %}
|
||||||
<main>
|
<main>
|
||||||
|
|
|
||||||
|
|
@ -7,6 +7,8 @@
|
||||||
--clr-body-txt: #fceaff;
|
--clr-body-txt: #fceaff;
|
||||||
--clr-content-bg: #3d2163;
|
--clr-content-bg: #3d2163;
|
||||||
|
|
||||||
|
--clr-top-btn: #FFD05A;
|
||||||
|
|
||||||
--clr-main-heading: #ED64F5;
|
--clr-main-heading: #ED64F5;
|
||||||
--clr-sub-heading: #e8b86f;
|
--clr-sub-heading: #e8b86f;
|
||||||
--clr-title-border: #d3aad5;
|
--clr-title-border: #d3aad5;
|
||||||
|
|
@ -227,32 +229,20 @@ dd {
|
||||||
grid-column-start: 2;
|
grid-column-start: 2;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ELEMENT STYLES WITH CUSTOM CLASSES */
|
/* Scrool to Top Button */
|
||||||
.bold-text {
|
.top-btn {
|
||||||
font-weight: 700;
|
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 {
|
.top-btn img {
|
||||||
display: grid;
|
width: 1.6rem;
|
||||||
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;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* HEADER COMPONENT */
|
/* HEADER COMPONENT */
|
||||||
|
|
@ -325,7 +315,7 @@ dd {
|
||||||
as the navigation bar gets a new position at the top of the page
|
as the navigation bar gets a new position at the top of the page
|
||||||
(position:fixed and top:0) */
|
(position:fixed and top:0) */
|
||||||
.sticky-nav + main {
|
.sticky-nav + main {
|
||||||
padding-top: 3.75rem;
|
padding-top: 2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* MAIN CONTENT */
|
/* MAIN CONTENT */
|
||||||
|
|
@ -751,3 +741,31 @@ article, .content-container {
|
||||||
.main-footer p {
|
.main-footer p {
|
||||||
padding: 0;
|
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;
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -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 |
|
|
@ -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",
|
||||||
|
});
|
||||||
|
});
|
||||||
Loading…
Reference in New Issue