vuepress
vuepress copied to clipboard
vuejs
Back to top when changing page.
- [x] I confirm that this is an issue rather than a question.
Bug report
Steps to reproduce
- go to the official documentation https://vuepress.vuejs.org/guide/
- scroll to the bottom of the page
- click "Getting Started →" in the footer
What is expected?
I navigate to the top of the "Getting started" page
What is actually happening?
I navigate to the bottom of the "Getting started" page
Other relevant information
I found a bunch of old issues and PR regarding this problem, #1071 #1075 #1107 #1108 and it looks like there where a lot of back-and-forth.
The current behavior is really anoying when using the documentation I am writing, the back to top plugin make a bit more useable but it will be much better to have a standard navigation (when you change page, you start at the top).
@mistic100 Great observation. Scroll behavior should not carry over to the next page.
For those wanting to see a reproduction of it, I have a screen recording here:
https://share.getcloudapp.com/v1umkwA7
Just confirming: I can reproduce this on Firefox, but not in Google Chrome or Safari.
Correct, on Chrome there is an animation that brings the scroll to the top.
(I am not a fan of this animation by the way, it is laggy when it's the first load of a page)
Same bug. Any known workaround/hack? I was trying for some time with no luck: afterEach in Vue Router, trying to force timeout with scrollTo 0 but they need user interaction somehow... I got a workaround after 2 days trying "5 different hacks": update() of Page with scrollTo in small timeouts, forcing to move to top unless the scrollY is different than at the init (user moved in between).
Tested on Chrome, Safari, Firefox, Brave and Edge. Confirmed that the bug is reproduced only on Firefox.
The scrolling issues on VuePress are driving me absolutely nuts but I think I have figured it out. There is also another issue where Chrome does not scroll to the correct anchor on the first page load which is also fixed by this. Add this to your enhanceApp.js:
export default ({ router }) => {
if (typeof process === 'undefined' || process.env.VUE_ENV !== 'server') {
router.onReady(() => {
const { app } = router
app.$once('hook:mounted', () => {
// Fix bullshit Chrome anchor scroll issue on page load
setTimeout(() => {
const { hash } = document.location;
if (hash.length > 1) {
const id = hash.substring(1)
const element = document.getElementById(id)
if (element) element.scrollIntoView()
}
}, 500)
})});
router.afterEach(() => {
// Fix bullshit Firefox scroll to top issue
const { hash } = document.location;
if (!hash.length) {
setTimeout(() => {
document.body.scrollTop = 0;
document.body.parentNode.scrollTop = 0;
document.documentElement.scrollTop = 0;
}, 501);
} else {
const id = hash.substring(1)
const element = document.getElementById(id)
if (element) element.scrollIntoView()
}
});
}
}
And the second part to fixing this problem is to actually change the default behavior of Firefox as it differs from the other browsers. We want to use the body tag for scrolling otherwise this just will not work (I have tested a million hacks and this was the only thing that got it to work, Firefox will just ignore ANY attempt to scroll the page after you switch pages otherwise). I have done this by adding this to index.styl:
html
overflow hidden
height: 100%
body
overflow: scroll
height: 100%
As far as I can tell, this solves all the scrolling issues for Chrome and Firefox. Can probably be cleaned up a bit but I just want this basic stuff to work for now and that's my take on that. Maybe someone else has the virtue to clean it up and turn it into a PR, otherwise you can just use this ugly hack.
Surprisingly all the previous links seems to work fine. Page scrolls right back at the top even in Firefox. Seems to be that only next links have this behaviour
Tested on Chrome and reproduced it. Demo: https://www.loom.com/share/347644c4f6114309af42b7f1e6c7300b
@bencodezen want to check back if i got the bug right :)
