Merge pull request #26 from erikyo/backToTopModule

added backToTop module

src/scripts/modules/backToTop/index.ts

@@ -0,0 +1,12 @@
+export function backToTop() {
+	const button: HTMLDivElement = document.createElement( 'div' );
+	button.setAttribute( 'id', 'backtotop' );
+	const scrollToTop = () => {
+		window.scrollTo( {
+			top: 0,
+			behavior: 'smooth',
+		} );
+	};
+	button.onclick = scrollToTop;
+	document.body.appendChild( button );
+}

src/scripts/modules/scrollControl/index.ts

@@ -27,6 +27,12 @@ function scrollCallback() {
 		}
 	}
 
+	if ( Ypos >= window.innerHeight ) {
+		document.body.classList.remove( 'above-the-fold' );
+	} else {
+		document.body.classList.add( 'above-the-fold' );
+	}
+
 	if ( Ypos < 5 ) {
 		document.body.classList.add( 'top' );
 	} else {

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';
 
 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";