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