mikl/hollow-knight-silksong-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>
<body>
<button class="scroll-up-button hidden">^</button>
<div id="background"></div>
<div id="content">

24
build/main.css
View file

@ -512,10 +512,34 @@ a.button:visited {
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 {
display: none;
}
.visible-block {
display: block;
}
.opacity-none {
opacity: 0;
}
.opacity-full {
opacity: 1;
}
.spoiler-text {
display: inline;
/* 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;
}
.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 {
display: none;
}
@ -629,17 +641,6 @@ input[type="radio"] {
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 {
color: #59d1da;
}

2
src/index.html
View file

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