When you use vue-router in vue to switch the page, the scroll bar will automatically scroll to the top of the page, vuevue-router

When you use vue-router in vue to switch the page, the scroll bar will automatically scroll to the top of the page, vuevue-router

Sometimes we need to scroll the page scroll to a fixed position.Window scrollTo() Method.

Syntax:scrollTo(xpos,ypos)

Xpos: required. X coordinate of the document to be displayed in the upper left corner of the document display area.

Ypos: required. Y coordinate of the document to be displayed in the upper left corner of the document display area.

For example, the coordinates of the scroll content are 100,500:

window.scrollTo(100,500);

Okay, this scrollTop is just a brief introduction. Next we will introduce the rolling behavior in veu-router.

When switching to a new ingress, you want to roll the page to the top or keep the original rolling position, just like reloading the page. Vue-router can achieve better performance. It allows you to customize how pages scroll during route switching.

Note: This function is only available in HTML5 history mode.

When creating a Router instance, you can provide a scrollBehavior method:

Const router = new VueRouter ({routes: [...], scrollBehavior (to, from, savedPosition) {// position where return is expected to scroll }})

The scrollBehavior method receives the to and from route objects. The third parameter "savedPosition" is available only when the popstate navigation is triggered by the browser's forward/backward button.

This method returns the object information of the scroll position. The length is as follows:

{X: number, y: number} {selector: string, offset? : {X: number, y: number }}( offset is only supported in 2.6.0 +)

If a falsy value is returned, or an empty object is returned.

Example:

scrollBehavior (to, from, savedPosition) { return { x: 0, y: 0 }}

For all Route Navigation, simply scroll the page to the top.

The savedPosition is returned. When you press the back/forward button, it will be like the native performance of the browser:

scrollBehavior (to, from, savedPosition) { if (savedPosition) {  return savedPosition } else {  return { x: 0, y: 0 } }}

If you want to simulate the behavior of rolling to the anchor:

scrollBehavior (to, from, savedPosition) { if (to.hash) {  return {   selector: to.hash  } }}

We can also use Route meta information to control scrolling in a finer granularity.

 routes: [  { path: '/', component: Home, meta: { scrollToTop: true }},  { path: '/foo', component: Foo },  { path: '/bar', component: Bar, meta: { scrollToTop: true }} ]

Complete example:

import Vue from 'vue'import VueRouter from 'vue-router'Vue.use(VueRouter)const Home = { template: '<div>home</div>' }const Foo = { template: '<div>foo</div>' }const Bar = { template: `  <div>   bar   <div style="height:500px"></div>   <p id="anchor">Anchor</p>  </div> `}// scrollBehavior:// - only available in html5 history mode// - defaults to no scroll behavior// - return false to prevent scrollconst scrollBehavior = (to, from, savedPosition) => { if (savedPosition) {  // savedPosition is only available for popstate navigations.  return savedPosition } else {  const position = {}  // new navigation.  // scroll to anchor by returning the selector  if (to.hash) {   position.selector = to.hash  }  // check if any matched route config has meta that requires scrolling to top  if (to.matched.some(m => m.meta.scrollToTop)) {   // cords will be used if no selector is provided,   // or if the selector didn't match any element.   position.x = 0   position.y = 0  }  // if the returned position is falsy or an empty object,  // will retain current scroll position.  return position }}const router = new VueRouter({ mode: 'history', base: __dirname, scrollBehavior, routes: [  { path: '/', component: Home, meta: { scrollToTop: true }},  { path: '/foo', component: Foo },  { path: '/bar', component: Bar, meta: { scrollToTop: true }} ]})new Vue({ router, template: `  <div id="app">   
I checked it online. Some netizens said they could try to write this in combination with vue-router in the main. js entry file.
router.afterEach((to,from,next) => {  window.scrollTo(0,0);});
Summary
The above section describes how to use vue-router to automatically scroll the scroll bar to the top of the page in vue, if you have any questions, please leave a message and the editor will reply to you in time. Thank you very much for your support for the help House website!