From 97e1b4712a5cfce8e690ce9ddef2c5c6bc3a3bee Mon Sep 17 00:00:00 2001 From: gardenboi Date: Wed, 8 Nov 2023 22:07:50 +0100 Subject: [PATCH 1/3] siplified backToTop --- src/scripts/modules/backToTop/backToTop.ts | 19 +++++++++++++++++++ src/scripts/scripts.ts | 3 +++ src/styles/patterns/_back-to-top.scss | 20 ++++++++++++++++++++ src/styles/patterns/patterns.scss | 1 + 4 files changed, 43 insertions(+) create mode 100644 src/scripts/modules/backToTop/backToTop.ts create mode 100644 src/styles/patterns/_back-to-top.scss diff --git a/src/scripts/modules/backToTop/backToTop.ts b/src/scripts/modules/backToTop/backToTop.ts new file mode 100644 index 00000000..08761991 --- /dev/null +++ b/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' ); + } + } ); +} diff --git a/src/scripts/scripts.ts b/src/scripts/scripts.ts index 7c761498..2fcb970e 100644 --- a/src/scripts/scripts.ts +++ b/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 () => { diff --git a/src/styles/patterns/_back-to-top.scss b/src/styles/patterns/_back-to-top.scss new file mode 100644 index 00000000..f60a3ad9 --- /dev/null +++ b/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; + } \ No newline at end of file diff --git a/src/styles/patterns/patterns.scss b/src/styles/patterns/patterns.scss index 01cdd4d0..39a71fb9 100644 --- a/src/styles/patterns/patterns.scss +++ b/src/styles/patterns/patterns.scss @@ -4,3 +4,4 @@ @import "_grid.scss"; @import "_headline.scss"; @import "_text-efx.scss"; +@import "_back-to-top.scss"; \ No newline at end of file From a2de13e9ca4c1983f35e738bb2895a498ab45882 Mon Sep 17 00:00:00 2001 From: gardenboi Date: Wed, 8 Nov 2023 23:00:55 +0100 Subject: [PATCH 2/3] requested changes --- src/scripts/modules/backToTop/backToTop.ts | 19 ------------------- src/scripts/modules/backToTop/index.ts | 12 ++++++++++++ src/scripts/modules/scrollControl/index.ts | 6 ++++++ src/scripts/scripts.ts | 2 +- 4 files changed, 19 insertions(+), 20 deletions(-) delete mode 100644 src/scripts/modules/backToTop/backToTop.ts create mode 100644 src/scripts/modules/backToTop/index.ts diff --git a/src/scripts/modules/backToTop/backToTop.ts b/src/scripts/modules/backToTop/backToTop.ts deleted file mode 100644 index 08761991..00000000 --- a/src/scripts/modules/backToTop/backToTop.ts +++ /dev/null @@ -1,19 +0,0 @@ -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' ); - } - } ); -} diff --git a/src/scripts/modules/backToTop/index.ts b/src/scripts/modules/backToTop/index.ts new file mode 100644 index 00000000..3229c0e7 --- /dev/null +++ b/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 ); +} diff --git a/src/scripts/modules/scrollControl/index.ts b/src/scripts/modules/scrollControl/index.ts index fa0b9ee0..7f7edbf5 100644 --- a/src/scripts/modules/scrollControl/index.ts +++ b/src/scripts/modules/scrollControl/index.ts @@ -27,6 +27,12 @@ function scrollCallback() { } } + if ( Ypos >= ( document.body.scrollHeight - window.innerHeight ) / 2 ) { + document.body.classList.remove( 'above-the-fold' ); + } else { + document.body.classList.add( 'above-the-fold' ); + } + if ( Ypos < 5 ) { document.body.classList.add( 'top' ); } else { diff --git a/src/scripts/scripts.ts b/src/scripts/scripts.ts index 2fcb970e..1a0d537e 100644 --- a/src/scripts/scripts.ts +++ b/src/scripts/scripts.ts @@ -6,7 +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'; +import { backToTop } from './modules/backToTop'; window.addEventListener( 'DOMContentLoaded', async () => { /* enable scroll animations */ From e07f81153e7f7a90246ac91ac64bfe2284b62ff9 Mon Sep 17 00:00:00 2001 From: gardenboi Date: Thu, 9 Nov 2023 00:02:32 +0100 Subject: [PATCH 3/3] changed fold calc --- src/scripts/modules/scrollControl/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/scripts/modules/scrollControl/index.ts b/src/scripts/modules/scrollControl/index.ts index 7f7edbf5..4f53f370 100644 --- a/src/scripts/modules/scrollControl/index.ts +++ b/src/scripts/modules/scrollControl/index.ts @@ -27,7 +27,7 @@ function scrollCallback() { } } - if ( Ypos >= ( document.body.scrollHeight - window.innerHeight ) / 2 ) { + if ( Ypos >= window.innerHeight ) { document.body.classList.remove( 'above-the-fold' ); } else { document.body.classList.add( 'above-the-fold' );