mirror of
https://github.com/Cian-H/am-d-model.eu.git
synced 2025-12-22 21:41:57 +00:00
Added scroll to top component and associated animation
This commit is contained in:
@@ -1,5 +1,7 @@
|
|||||||
<script>
|
<script>
|
||||||
import "./NavigationFooter.scss";
|
import "./NavigationFooter.scss";
|
||||||
|
import "../shared_components/ScrollToTop.svelte";
|
||||||
|
import ScrollToTop from "../shared_components/ScrollToTop.svelte";
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="navigation-footer">
|
<div class="navigation-footer">
|
||||||
@@ -37,7 +39,10 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="navigation-footer-column-mid">
|
<div class="navigation-footer-column-mid">
|
||||||
<div class="navigation-footer-return">↥↥↥ Return to top ↥↥↥</div>
|
<ScrollToTop
|
||||||
|
class="navigation-footer-return"
|
||||||
|
text="↥↥↥ Return to top ↥↥↥"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div class="navigation-footer-column-right">
|
<div class="navigation-footer-column-right">
|
||||||
<div class="navigation-footer-topic-column">
|
<div class="navigation-footer-topic-column">
|
||||||
|
|||||||
28
src/shared_components/ScrollToTop.svelte
Normal file
28
src/shared_components/ScrollToTop.svelte
Normal file
@@ -0,0 +1,28 @@
|
|||||||
|
<script>
|
||||||
|
export let text = "Return to top";
|
||||||
|
|
||||||
|
function scrollToTop() {
|
||||||
|
window.scrollTo({
|
||||||
|
top: 0,
|
||||||
|
behavior: "smooth",
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleKeydown(event) {
|
||||||
|
if (event.key === "Enter" || event.key === " ") {
|
||||||
|
event.preventDefault();
|
||||||
|
scrollToTop();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<span
|
||||||
|
class="cursor-pointer {$$props.class}"
|
||||||
|
style="cursor: pointer;"
|
||||||
|
on:click={scrollToTop}
|
||||||
|
on:keydown={handleKeydown}
|
||||||
|
tabindex="0"
|
||||||
|
role="button"
|
||||||
|
>
|
||||||
|
{text}
|
||||||
|
</span>
|
||||||
Reference in New Issue
Block a user