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 too 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 div2. Only a very few select elements are scrolled to correctly. 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")
}
SOLUTION:
With the help of IVO GELOV's answer I was able to update the scroll behavior function with the code below and all works as expected.
scrollBehavior (to, from, savedPosition) {
let position = {}
if (to.hash) {
position = {
selector: to.hash,
offset: { x: 0, y: 100 },
behavior: 'smooth',
}
} else {
position = { x: 0, y: 0 }
}
return new Promise((resolve) => {
setTimeout(() => {
resolve(position)
}, 100)
})
}
Nuxt.js is using the following code in its ./nuxt/router.js - perhaps you can adopt it to your usecase:
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
if (process.client) {
window.history.scrollRestoration = 'manual'
}
const scrollBehavior = function (to, from, savedPosition) {
// if the returned position is falsy or an empty object,
// will retain current scroll position.
let position = false
// if no children detected
if (to.matched.length < 2) {
// scroll to the top of the page
position = { x: 0, y: 0 }
} else if (to.matched.some((r) => r.components.default.options.scrollToTop)) {
// if one of the children has scrollToTop option set to true
position = { x: 0, y: 0 }
}
// savedPosition is only available for popstate navigations (back button)
if (savedPosition) {
position = savedPosition
}
return new Promise(resolve => {
// wait for the out transition to complete (if necessary)
window.$nuxt.$once('triggerScroll', () => {
// coords will be used if no selector is provided,
// or if the selector didn't match any element.
if (to.hash) {
let hash = to.hash
// CSS.escape() is not supported with IE and Edge.
if (typeof window.CSS !== 'undefined' && typeof window.CSS.escape !== 'undefined') {
hash = '#' + window.CSS.escape(hash.substr(1))
}
try {
if (document.querySelector(hash)) {
// scroll to anchor by returning the selector
position = { selector: hash }
}
} catch (e) {
console.warn('Failed to save scroll position. Please add CSS.escape() polyfill (https://github.com/mathiasbynens/CSS.escape).')
}
}
resolve(position)
})
})
}
export function createRouter () {
return new Router({
mode: 'history',
base: '/',
linkActiveClass: 'nuxt-link-active',
linkExactActiveClass: 'nuxt-link-exact-active',
scrollBehavior,
routes: [ .... ],
fallback: false
})
}
An example implementation (taken from https://dev.to/dimer191996/nuxt-js-smooth-scrolling-with-hash-links-94a) - you may also need to set window.history.scrollRestoration = 'manual' if your <router-view> is wrapped inside a <transition>:
scrollBehavior: async (to, from, savedPosition) => {
if (savedPosition) {
return savedPosition
}
const findEl = async (hash, x) => {
return document.querySelector(hash) ||
new Promise((resolve, reject) => {
if (x > 50) {
return resolve()
}
setTimeout(() => { resolve(findEl(hash, ++x || 1)) }, 100)
})
}
if (to.hash) {
let el = await findEl(to.hash)
if ('scrollBehavior' in document.documentElement.style) {
return window.scrollTo({ top: el.offsetTop, behavior: 'smooth' })
} else {
return window.scrollTo(0, el.offsetTop)
}
}
return { x: 0, y: 0 }
}