Add scroll-to-top functionality on logo/title click
All checks were successful
build-website / build (push) Successful in 1m33s
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:
@@ -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 })
|
||||
|
||||
Reference in New Issue
Block a user