siplified backToTop

Author: gardenboi

src/scripts/modules/backToTop/backToTop.ts

@@ -0,0 +1,19 @@
+export function backToTop() {
+	const button: HTMLDivElement = document.createElement( 'div' );
+	button.setAttribute( 'id', 'backtotop' );
+	const scrollToTop = () => {
+		window.scrollTo( 0, 0 );
+	};
+	button.onclick = scrollToTop;
+	document.body.appendChild( button );
+	window.addEventListener( 'scroll', () => {
+		if (
+			window.scrollY >=
+			( document.body.scrollHeight - window.innerHeight ) / 2
+		) {
+			document.body.classList.remove( 'above-the-fold' );
+		} else {
+			document.body.classList.add( 'above-the-fold' );
+		}
+	} );
+}

src/scripts/scripts.ts

@@ -6,6 +6,7 @@ import { modulrMasonryController } from './modules/masonry';
 import { modulrSelectController } from './modules/select';
 import { modulrGrid } from './modules/grid';
 import { modulrScrollTo } from './modules/scroll/scroll';
+import { backToTop } from './modules/backToTop/backToTop';
 
 window.addEventListener( 'DOMContentLoaded', async () => {
 	/* enable scroll animations */
@@ -18,6 +19,8 @@ window.addEventListener( 'DOMContentLoaded', async () => {
 	modulrGrid();
 	/* enable oxone like animation for grid elements */
 	modulrScrollTo();
+	/* create a back-to-top button */
+	backToTop();
 } );
 
 window.addEventListener( 'load', async () => {

src/styles/patterns/_back-to-top.scss

@@ -0,0 +1,20 @@
+#backtotop {
+    box-sizing: border-box;
+    position: fixed;
+    opacity: 0;
+    visibility: hidden;
+    bottom: 20px;
+    right: 20px;
+    width : 50px;
+    height : 50px;
+    background-color: #ffffff;
+    border: 2px solid #666;
+    border-radius: 50%;
+    cursor: pointer;
+    transition: opacity 350ms, visibility 350ms;
+  }
+  
+  body:not(.above-the-fold) #backtotop {
+    visibility: visible;
+    opacity: 1;
+  }

src/styles/patterns/patterns.scss

@@ -4,3 +4,4 @@
 @import "_grid.scss";
 @import "_headline.scss";
 @import "_text-efx.scss";
+@import "_back-to-top.scss";