ExploreCraft/website
ExploreCraft/website
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

[c] fix top-button

Browse source
This commit is contained in:
Sangelo 2024-06-12 14:28:53 +02:00
parent fd7eca8e27
commit fafc300879
2 changed files with 18 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
src/app.scss
View file

@ -69,6 +69,11 @@ button.transparent,
background: linear-gradient(to top, $slate-800, #00000000); background: linear-gradient(to top, $slate-800, #00000000);
} }
.top-button.show {
visibility: visible !important;
opacity: 1 !important;
}
#nprogress .bar { #nprogress .bar {
background: #398711 !important; background: #398711 !important;
} }

31
src/routes/+layout.svelte
View file

@ -6,6 +6,7 @@
import { page } from '$app/stores'; import { page } from '$app/stores';
import "nprogress/nprogress.css"; import "nprogress/nprogress.css";
import { smoothScrollTo, handleKeydown } from "$lib/common"; import { smoothScrollTo, handleKeydown } from "$lib/common";
import IconChevronUp from 'svelte-material-icons/ChevronUp.svelte';
import { fly } from "svelte/transition"; import { fly } from "svelte/transition";
import { onMount } from "svelte"; import { onMount } from "svelte";
@ -28,18 +29,6 @@
} }
onMount(() => { onMount(() => {
function smoothScrollTo(elementId) {
document.getElementById(elementId).scrollIntoView({
behavior: "smooth",
});
}
function handleKeydown(elementId, event) {
if (event.key === "Enter") {
smoothScrollTo(elementId);
}
}
function toggleTopButton() { function toggleTopButton() {
const topButton = document.querySelector(".top-button"); const topButton = document.querySelector(".top-button");
if (window.scrollY >= window.innerHeight) { if (window.scrollY >= window.innerHeight) {
@ -73,7 +62,7 @@
on:click={() => smoothScrollTo("header")} on:click={() => smoothScrollTo("header")}
on:keydown={(event) => handleKeydown("header", event)} on:keydown={(event) => handleKeydown("header", event)}
> >
Top <IconChevronUp size="1.5em" />
</a> </a>
<footer> <footer>
@ -118,14 +107,20 @@
} }
.top-button { .top-button {
display: none; display: flex;
visibility: hidden;
position: fixed; position: fixed;
width: 2.5em;
height: 2.5em;
bottom: 1em; bottom: 1em;
right: 1em; right: 1em;
z-index: 999;
&.show { opacity: 0;
display: inline-block; padding: 0;
} transition: 0.2s ease-in-out;
border-radius: 1000px;
align-items: center;
justify-content: center;
} }
@media (min-width: 480px) { @media (min-width: 480px) {