Skip to content

Commit

Permalink
adding scroll to top button
Browse files Browse the repository at this point in the history
closes #21
  • Loading branch information
DerLev committed Apr 25, 2024
1 parent 549bb9b commit a0b5157
Show file tree
Hide file tree
Showing 4 changed files with 64 additions and 0 deletions.
37 changes: 37 additions & 0 deletions homepage/app/components/ScrollToTop.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
import r2wc from '@r2wc/react-to-web-component'

const ScrollToTop = () => {
const scrollToTop = () => {
document.body.scrollTo({ top: 0, left: 0, behavior: 'smooth' })
}

return (
<button className="scroll-to-top-button hidden" onClick={scrollToTop}>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
strokeWidth={1.5}
stroke="currentColor"
className="icon"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="m4.5 18.75 7.5-7.5 7.5 7.5"
/>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="m4.5 12.75 7.5-7.5 7.5 7.5"
/>
</svg>
</button>
)
}

export default ScrollToTop

const WebScrollToTop = r2wc(ScrollToTop)
window.customElements.get('scroll-to-top') ||
window.customElements.define('scroll-to-top', WebScrollToTop)
17 changes: 17 additions & 0 deletions homepage/app/main.ts
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ export * from './components/NavProgress'
export * from './components/CookieConsent'
export * from './components/CopyCode'
export * from './components/CopySectionLink'
export * from './components/ScrollToTop'

window.addEventListener('flamethrower:router:fetch', () => {
store.dispatch(isLoading())
Expand Down Expand Up @@ -42,17 +43,33 @@ const bodyScrollListenerCallback = () => {
else navBar.classList.remove('scrolled')
}

let buttonHideTimeout: NodeJS.Timeout

const bodyScrollButtonCallback = () => {
const scrollToTopButton = document.querySelector(
'button.scroll-to-top-button',
)

scrollToTopButton?.classList.remove('hidden')
clearTimeout(buttonHideTimeout)
buttonHideTimeout = setTimeout(() => {
scrollToTopButton?.classList.add('hidden')
}, 2000)
}

window.addEventListener('load', () => {
getNavbarHeight()
bodyScrollListenerCallback()
document.body.addEventListener('scroll', () => {
bodyScrollListenerCallback()
bodyScrollButtonCallback()
})
})
window.addEventListener('flamethrower:router:end', () => {
getNavbarHeight()
bodyScrollListenerCallback()
document.body.addEventListener('scroll', () => {
bodyScrollListenerCallback()
bodyScrollButtonCallback()
})
})
1 change: 1 addition & 0 deletions homepage/layouts/_default/baseof.html
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,7 @@
{{/* footer */}}
{{- end -}}
<cookie-consent></cookie-consent>
<scroll-to-top></scroll-to-top>
</div>
</body>
</html>
9 changes: 9 additions & 0 deletions homepage/styles/app.scss
Original file line number Diff line number Diff line change
Expand Up @@ -122,3 +122,12 @@ time[data-hover] {
@apply opacity-100;
}
}

button.scroll-to-top-button {
@apply block fixed bottom-0 right-0 mb-4 mr-5 rounded-full p-1.5 bg-neutral-800/45 backdrop-blur transition-opacity text-neutral-300 shadow-lg;

&.hidden {
@apply opacity-0 duration-500;
pointer-events: none;
}
}

0 comments on commit a0b5157

Please sign in to comment.