New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Scroll to top on route change issue on iOS #173
Comments
The router doesn't automatically scroll to top when the route changes. You can do that in a global before hook though: router.beforeEach(function (transition) {
window.scrollTo(0, 0)
transition.next()
}) |
Any elegant way to solve this problem? |
Solution @yyx990803 proposed is pretty elegant... Why you don't like it? |
Just first impression, I think it's OK now 😀 |
thanks! @yyx990803, i also have this problem. |
Is this available in vue-router@next? I managed to use this per component export default{
data(){
return {}
},
created() {
//Scrolls to top when view is displayed
window.scrollTo(0, 0);
}
} But wondering if it is a router configuration |
@asantibanez Checkout scrollBehavior https://github.com/vuejs/vue-router/releases |
Looks like the arguments for https://router.vuejs.org/en/advanced/navigation-guards.html#global-guards @yyx990803's example would now be:
|
Setting global |
Use this
https://stackoverflow.com/questions/21474678/scrolltop-animation-without-jquery |
The fix would scroll current page to top then do the route. That's not what people want if they have route animation. |
@pajtai - Stupid question here. Where do I add that customization? I have a webpack application with my main.js as :
I tried inserting into my main.js before the |
Just wanted to piggyback @jesong's comment and (re?)highlight this problem. Using beforeEach to scroll causes the page to scroll before any route animation is made, which doesn't look too good. |
For those that want to apply the animation after the route has changed, or doesn't want that odd flicker of the view when using the
Reference: https://router.vuejs.org/en/api/router-instance.html |
This is better (scrollBehavior):
See https://router.vuejs.org/guide/advanced/scroll-behavior.html#async-scrolling |
@yyx990803 thanks it worked for me. |
@edarioq |
Thank you for the solution. This is working for my project. |
I'm building web app with Vue and have some strange behavior on iOS (Safari).
When route changes Safari won't scroll to top of the page (everything's fine on other platforms/browsers)
Has someone faced such problems?
Thanks.
The text was updated successfully, but these errors were encountered: