Vue page jump, scroll bar back to the top

preface

In the vue project, I scroll to the bottom of one page, then jump to another page, the scroll bar will stop at the bottom… We tested a lot of different things

The scroll bar remains on the previous page after a jump

The solution

Just manually set the scroll bar to the top of the route jump. The following code is set to the top

  document.body.scrollTop = 0
  // firefox
  document.documentElement.scrollTop = 0
Copy the code

But if you set it up you also need to know when the route is going to jump and then when it’s going to jump and then you add this on the vue-router there’s a global route navigation, where you can intercept all the route jumps and the complete code is below

router.beforeEach((to, from, next) => {
  document.body.scrollTop = 0
  // firefox
  document.documentElement.scrollTop = 0
  next()
})
Copy the code