Use smooth scroll function to navigate to anchor

Using a eased RAF function to scroll to a specific target
Avoid using `scrollIntoView` or smooth behavior as it doesn't work on Safari and others.
This commit is contained in:
2022-07-11 16:42:28 +02:00
parent f81a468a04
commit ae4ea7f4fa
6 changed files with 73 additions and 7 deletions

View File

@@ -6,6 +6,7 @@
import { goto } from '$app/navigation'
import { getContext } from 'svelte'
import { shopCurrentProductSlug } from '$utils/stores/shop'
import { smoothScroll } from '$utils/functions'
export let isOver: boolean = false
@@ -22,6 +23,8 @@
const quickLocationChange = ({ target: { value }}: any) => {
const newPath = `/shop/poster-${value}`
goto(newPath, { replaceState: true, noscroll: true, keepfocus: true })
// Scroll to anchor
setTimeout(() => smoothScroll('poster'), 1000)
}
</script>