wp-productzilla/wp-content/plugins/blocksy-companion/static/js/helpers/scroll-to-target.js
rizal.productzilla e38e8b231d templating
2024-04-01 16:08:46 +07:00

66 lines
1.3 KiB
JavaScript

import { areWeDealingWithSafari } from 'blocksy-frontend'
export const scrollToTarget = (target) => {
if (!target) {
return
}
var start = window.scrollY
var currentTime = null
const animateScroll = (timestamp) => {
if (!currentTime) currentTime = timestamp
var progress = timestamp - currentTime
const easeInOutQuad = (t, b, c, d) => {
t /= d / 2
if (t < 1) return (c / 2) * t * t + b
t--
return (-c / 2) * (t * (t - 2) - 1) + b
}
const summary = target.getBoundingClientRect()
let offset = 0
const maybeStickyHeader = document.querySelector(
'[data-sticky*=yes], [data-sticky*=fixed]'
)
if (maybeStickyHeader) {
offset = parseFloat(getComputedStyle(maybeStickyHeader).top) || 0
}
const destination =
window.scrollY +
summary.top -
(parseFloat(
getComputedStyle(document.body).getPropertyValue(
'--header-sticky-height'
)
) || 0) -
20 -
offset
var val = Math.max(
easeInOutQuad(progress, start, -start, 700),
destination
)
if (areWeDealingWithSafari) {
scrollTo(0, val)
if (progress < 700) {
requestAnimationFrame(animateScroll)
}
} else {
scrollTo(0, destination)
}
}
if (areWeDealingWithSafari) {
requestAnimationFrame(animateScroll)
} else {
animateScroll(0)
}
}