Add scroll-to-top button to pages
This commit is contained in:
parent
7d5cffcb79
commit
2799f0f2cc
6 changed files with 77 additions and 0 deletions
|
@ -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>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
||||||
|
|
|
@ -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>
|
||||||
|
|
||||||
|
|
|
@ -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
57
page/scrollToTop.js
Normal 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)})`,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})))
|
|
@ -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>
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue