Add scroll-to-top button to pages

index.html

@@ -1,6 +1,10 @@
 <link rel="stylesheet" href="page/style.css">
 
 <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>
 <p>A JavaScript <em>micro-framework</em> to make front-end <em>easier</em></p>

page/debounce.html

@@ -2,6 +2,10 @@
 
 <script type="module" src="codeblock.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>
 

page/element.html

@@ -2,6 +2,10 @@
 
 <script type="module" src="codeblock.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>
 

page/listener.html

@@ -2,6 +2,10 @@
 
 <script type="module" src="codeblock.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>
 

page/scrollToTop.js

@@ -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)})`,
+		}
+	}
+})))

page/skooma.html

@@ -2,6 +2,10 @@
 
 <script type="module" src="codeblock.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>