Vue Academy · Lesson

Scroll Behavior Configuration

scrollBehavior(to, from, savedPosition), smooth scroll, scroll to hash, restore position.

Scroll Behavior Configuration is a free Vue Academy lesson on CoddyKit — lesson 3 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Vue Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

Controlling Scroll on Navigation

In a single-page app the page does not reload, so the browser does not reset scroll for you. Vue Router's scrollBehavior function lets you decide where the page scrolls after each navigation.

Where It Lives

Pass scrollBehavior when creating the router. It runs on every navigation.

const router = createRouter({
  history: createWebHistory(),
  routes,
  scrollBehavior(to, from, savedPosition) {
    // return a position
  }
})

The Three Parameters

It receives to (target route), from (current route), and savedPosition. The last is non-null only when navigating via the browser back/forward buttons.

Scroll to Top for New Routes

The simplest behavior: scroll to the top whenever the user navigates to a new page.

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

Restoring Position on Back

When savedPosition exists, return it so the back button returns the user exactly where they were — matching native browser behavior.

scrollBehavior(to, from, savedPosition) {
  if (savedPosition) {
    return savedPosition
  }
  return { top: 0 }
}

Why savedPosition Matters

Without restoring savedPosition, pressing back would dump the user at the top of a long list they had scrolled through. Returning it preserves their place.

Scrolling to an Anchor

If the target URL has a hash like #section, scroll to that element by returning an el selector.

scrollBehavior(to) {
  if (to.hash) {
    return { el: to.hash }
  }
  return { top: 0 }
}

Smooth Scrolling

Add behavior: 'smooth' to animate the scroll instead of jumping instantly.

scrollBehavior(to) {
  if (to.hash) {
    return { el: to.hash, behavior: 'smooth' }
  }
}

Offsetting for a Fixed Header

A sticky header can cover the target anchor. Add top as an offset so the element lands below the header.

scrollBehavior(to) {
  if (to.hash) {
    return { el: to.hash, top: 80 }
  }
}

Delaying the Scroll

If content loads asynchronously, return a Promise that resolves with the position after a delay so the target exists when scrolling runs.

scrollBehavior(to, from, savedPosition) {
  return new Promise((resolve) => {
    setTimeout(() => resolve({ top: 0 }), 300)
  })
}

Combining the Rules

A complete handler prioritizes saved position, then hash anchors, then defaults to the top.

scrollBehavior(to, from, savedPosition) {
  if (savedPosition) return savedPosition
  if (to.hash) return { el: to.hash, behavior: 'smooth' }
  return { top: 0 }
}

Quick Check

Test your knowledge of scroll behavior.

Recap

scrollBehavior controls scroll on navigation:

Receives to, from, and savedPosition.
Return savedPosition to restore the back-button position.
Return { el: to.hash } to scroll to an anchor.
Return { top: 0 } for fresh navigations to new routes.

Frequently asked questions

Is the “Scroll Behavior Configuration” lesson free?

Yes — the full text of “Scroll Behavior Configuration” is free to read here on the web, and the Vue Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Vue Academy course, upgrade to CoddyKit PRO.

What will I learn in “Scroll Behavior Configuration”?

scrollBehavior(to, from, savedPosition), smooth scroll, scroll to hash, restore position. You practise Vue Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start Vue Academy?

No prior experience is required. Vue Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 3 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Scroll Behavior Configuration” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this Vue Academy lesson?

Yes. Every Vue Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to Vue Academy