Add scroll-to-top button to pages

This commit is contained in:
Talia 2022-06-09 13:46:42 +02:00
parent 7d5cffcb79
commit 2799f0f2cc
6 changed files with 77 additions and 0 deletions

View file

@ -1,6 +1,10 @@
<link rel="stylesheet" href="page/style.css"> <link rel="stylesheet" href="page/style.css">
<script type="module" src="page/codeblock.js"></script> <script type="module" src="page/codeblock.js"></script>
<script type="module" src="page/scrollToTop.js"></script>
<scroll-to-top>
</scroll-to-top>
<h1>DarkWiiPlayer/JS</h1> <h1>DarkWiiPlayer/JS</h1>
<p>A JavaScript <em>micro-framework</em> to make front-end <em>easier</em></p> <p>A JavaScript <em>micro-framework</em> to make front-end <em>easier</em></p>

View file

@ -2,6 +2,10 @@
<script type="module" src="codeblock.js"></script> <script type="module" src="codeblock.js"></script>
<script type="module" src="filesize.js"></script> <script type="module" src="filesize.js"></script>
<script type="module" src="scrollToTop.js"></script>
<scroll-to-top>
</scroll-to-top>
<h1 class="js module">debounce.js</h1> <h1 class="js module">debounce.js</h1>

View file

@ -2,6 +2,10 @@
<script type="module" src="codeblock.js"></script> <script type="module" src="codeblock.js"></script>
<script type="module" src="filesize.js"></script> <script type="module" src="filesize.js"></script>
<script type="module" src="scrollToTop.js"></script>
<scroll-to-top>
</scroll-to-top>
<h1 class="js module">element.js</h1> <h1 class="js module">element.js</h1>

View file

@ -2,6 +2,10 @@
<script type="module" src="codeblock.js"></script> <script type="module" src="codeblock.js"></script>
<script type="module" src="filesize.js"></script> <script type="module" src="filesize.js"></script>
<script type="module" src="scrollToTop.js"></script>
<scroll-to-top>
</scroll-to-top>
<h1 class="js module">listener.js</h1> <h1 class="js module">listener.js</h1>

57
page/scrollToTop.js Normal file
View file

@ -0,0 +1,57 @@
import element from "/element.js"
import {css, variable as v} from "../css.js"
element(class ScrollToTop extends HTMLElement {
constructor() {
super()
this.append(
html.a("↑")
)
this.addEventListener("click", event => {
document.body.scrollTo({top: 0, behavior: "smooth"})
})
}
})
let radius = .6
const setTop = () => {
if (document.body.scrollTop > 20) {
document.body.classList.remove("top")
} else {
document.body.classList.add("top")
}
}
window.addEventListener("scroll", setTop, {passive: true})
setTop()
document.head.append(html.style(css({
"scroll-to-top": {
background: v`color-hl`,
color: 'white',
width: CSS.em(radius*2),
height: CSS.em(radius*2),
borderRadius: CSS.em(radius),
display: 'flex',
justifyContent: "center",
alignItems: "center",
fontSize: CSS.em(3),
boxShadow: [
[...[.1, .1, .2].map(CSS.em), "#0004"],
],
position: 'fixed',
right: CSS.em(radius * 2),
bottom: CSS.em(radius * 2),
transition: [
["all", CSS.s(.3)],
],
cursor: "pointer",
},
$top: {
"scroll-to-top": {
opacity: 0,
transform: `translate(0px, ${CSS.em(radius * 2)})`,
}
}
})))

View file

@ -2,6 +2,10 @@
<script type="module" src="codeblock.js"></script> <script type="module" src="codeblock.js"></script>
<script type="module" src="filesize.js"></script> <script type="module" src="filesize.js"></script>
<script type="module" src="scrollToTop.js"></script>
<scroll-to-top>
</scroll-to-top>
<h1>Skooma.js</h1> <h1>Skooma.js</h1>