When clicking a link on the app, the Router does not scroll to the correct hash location given. But it DOES scoll. The scroll is always about 1 element to high on the page. For example, if my page is this:
<template>
<div id="div1">Div1</div>
<div id="div2">Div2</div>
<div id="div3">Div3</div>
<div id="div4">Div4</div>
</template>
Then if i click a link that goes to hash “div3” it will scroll me so the top of the page is sitting at div2. Only a very few selec elements are scrolled to corrently. Is there a reason for this? Setting page margins?
Router code:
const router = new VueRouter({
routes,
mode: 'history',
base: "/",
scrollBehavior (to, from, savedPosition) {
if (to.hash) {
return {
selector: to.hash,
behavior: 'smooth',
}
} else {
return { x: 0, y: 0 }
}
}
})
Example of code that calls the hash routing:
if (item.title == "Mission") {
router.push({name: 'Explore', hash: '#mission-statement'});
} else if (item.title == "Our Story") {
router.push({name: 'Explore', hash: '#our-story-container'});
} else if (item.title == "Shared principles") {
router.push({name: 'Explore', hash: '#shared-principles-container'});
} else if (item.title == "Volunteer Opportunities") {
router.push({name: 'Explore', hash: '#volunteer-container'});
} else if (item.title == "Gallery") {
router.push({name: 'Explore', hash: '#galleries'});
} else if (item.title == "Living") {
router.push({name: 'Explore', hash: '#living-container'});
} else if (item.title == "Contact Us") {
router.push({name: 'Explore', hash: '#contact-us-container'});
} else {
router.push("/explore")
}