Add scroll-to-top functionality on logo/title click
All checks were successful
build-website / build (push) Successful in 1m33s

- Made navbar brand (logo + title) clickable with cursor pointer
- Added scrollToTop function to smoothly scroll to page top
- Especially useful on mobile devices for quick navigation

Users can now tap the Harbor Smith logo or title to return to top.
This commit is contained in:
2025-09-19 11:10:09 +02:00
parent 213813f3a6
commit bcb729c017

View File

@@ -4,7 +4,7 @@
:class="['voyage-nav', { scrolled: isScrolled }]"
>
<div class="nav-container">
<div class="nav-brand">
<div class="nav-brand" @click="scrollToTop" style="cursor: pointer;">
<img
:src="navLogo"
:alt="logoAlt"
@@ -71,6 +71,10 @@ const handleSmoothScroll = (event: Event, href: string) => {
target.scrollIntoView({ behavior: 'smooth', block: 'start' })
}
const scrollToTop = () => {
window.scrollTo({ top: 0, behavior: 'smooth' })
}
onMounted(() => {
handleScroll()
window.addEventListener('scroll', handleScroll, { passive: true })