forked from emre/www_projectmycelium_com
refactor: implement smart navigation for "Get Mycelium Connector" button with smooth scroll utility
- Added smoothScrollToElement utility function in src/utils/scroll.ts with easeInOutQuad animation and configurable duration - Changed Header and HeaderDark "Get Mycelium Connector" button from static /download link to onClick handler with conditional navigation - Added handleGetConnectorClick function that scrolls to #download section when on /network page, otherwise navigates to /network - Change
This commit is contained in:
28
src/utils/scroll.ts
Normal file
28
src/utils/scroll.ts
Normal file
@@ -0,0 +1,28 @@
|
||||
export function smoothScrollToElement(id: string, duration = 800) {
|
||||
const element = document.getElementById(id)
|
||||
if (!element) return
|
||||
|
||||
const startY = window.scrollY || window.pageYOffset
|
||||
const targetRect = element.getBoundingClientRect()
|
||||
const targetY = startY + targetRect.top
|
||||
const startTime = performance.now()
|
||||
|
||||
function easeInOutQuad(t: number) {
|
||||
return t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t
|
||||
}
|
||||
|
||||
function step(currentTime: number) {
|
||||
const elapsed = currentTime - startTime
|
||||
const progress = Math.min(elapsed / duration, 1)
|
||||
const eased = easeInOutQuad(progress)
|
||||
const nextY = startY + (targetY - startY) * eased
|
||||
|
||||
window.scrollTo(0, nextY)
|
||||
|
||||
if (progress < 1) {
|
||||
requestAnimationFrame(step)
|
||||
}
|
||||
}
|
||||
|
||||
requestAnimationFrame(step)
|
||||
}
|
||||
Reference in New Issue
Block a user