mikl/hollow-knight-completion-check
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

ScrollToElement() working

Browse source
This commit is contained in:
ReznoRMichael 2021-02-16 19:54:05 +01:00
parent 9195886bea
commit 53561d5ebb
6 changed files with 65 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
build/app.js
View file

File diff suppressed because one or more lines are too long

2
build/index.html
View file

@ -145,6 +145,8 @@
<link rel="icon" href="favicon.png"><link href="main.css" rel="stylesheet"></head> <link rel="icon" href="favicon.png"><link href="main.css" rel="stylesheet"></head>
<body> <body>
<button class="scroll-up-button hidden">^</button>
<div id="background"></div> <div id="background"></div>
<div id="content"> <div id="content">

24
build/main.css
View file

@ -512,10 +512,34 @@ a.button:visited {
height: 1.47rem; height: 1.47rem;
} }
.scroll-up-button {
width: 50px;
height: 50px;
text-decoration: none;
position: fixed;
right: 1px;
bottom: 0;
z-index: 1100;
opacity: 0;
transition: all 0.3s ease;
}
.hidden { .hidden {
display: none; display: none;
} }
.visible-block {
display: block;
}
.opacity-none {
opacity: 0;
}
.opacity-full {
opacity: 1;
}
.spoiler-text { .spoiler-text {
display: inline; display: inline;
/* These are technically the same, but use both */ /* These are technically the same, but use both */

23
src/css/style.css
View file

@ -405,6 +405,18 @@ a.button:visited {
height: 1.47rem; height: 1.47rem;
} }
.scroll-up-button {
width: 50px;
height: 50px;
text-decoration: none;
position: fixed;
right: 1px;
bottom: 0;
z-index: 1100;
opacity: 0;
transition: all 0.3s ease;
}
.hidden { .hidden {
display: none; display: none;
} }
@ -629,17 +641,6 @@ input[type="radio"] {
border: 2px solid #2d8a49; border: 2px solid #2d8a49;
} }
.scroll-up-button {
width: 50px;
height: 50px;
text-decoration: none;
position: fixed;
right: 1px;
bottom: 0;
z-index: 1100;
transition: all 0.3s ease;
}
.test { .test {
color: #59d1da; color: #59d1da;
} }

2
src/index.html
View file

@ -30,7 +30,7 @@
</head> </head>
<body> <body>
<button class="scroll-up-button hidden opacity-none">^</button> <button class="scroll-up-button hidden">^</button>
<div id="background"></div> <div id="background"></div>

29
src/js/page-functions.js
View file

@ -1,7 +1,10 @@
function ScrollTo(element) { const ROOT = document.documentElement;
const SCROLL_BUTTON = document.querySelector(".scroll-up-button");
function ScrollToElement(element) {
/* Scroll to the element top */ /* Scroll to the element top */
element.ScrollTo({ element.scrollTo({
top: 0, top: 0,
behavior: "smooth" behavior: "smooth"
}); });
@ -9,20 +12,16 @@ function ScrollTo(element) {
function ShowElement(element) { function ShowElement(element) {
element.classList.toggle("hidden"); element.classList.add("visible-block");
element.classList.toggle("opacity-none");
element.classList.add("visible");
element.classList.add("opacity-full"); element.classList.add("opacity-full");
element.classList.remove("hidden");
} }
function HideElement(element) { function HideElement(element) {
element.classList.toggle("visible"); element.classList.remove("visible-block");
element.classList.toggle("opacity-full"); element.classList.remove("opacity-full");
element.classList.add("hidden"); element.classList.add("hidden");
element.classList.add("opacity-none");
} }
function TogglePageScrollElement(root, element, ratio) { function TogglePageScrollElement(root, element, ratio) {
@ -42,13 +41,13 @@ function TogglePageScrollElement(root, element, ratio) {
document.addEventListener("scroll", () => { document.addEventListener("scroll", () => {
TogglePageScrollElement( TogglePageScrollElement(
/* the document element root (<html>) */ /* the document element root (<html>) */
document.documentElement, ROOT,
/* Which element to toggle visibility */ /* Which element to toggle visibility */
document.querySelector(".scroll-up-button"), SCROLL_BUTTON,
/* How far the user has to scroll to show the element */ /* How far the user has to scroll to show the element */
0.50); 0.1);
}); });
document.querySelector(".scroll-up-button").addEventListener("click", () => { SCROLL_BUTTON.addEventListener("click", () => {
ScrollTo(document.documentElement); ScrollToElement(ROOT);
}); });