# Programmatic scrolling

You can programmatically trigger scrolling in your application by using the goTo method found on the $vuetify object. This method supports several different types of target selectors, and options including smooth scrolling using built-in easing functions.

# Usage

The goTo method takes two parameters target and options. target can be either a pixel offset from the top of the page, a valid css selector, or an element reference. options is an object that includes duration, easing, container, and offset.

# API

# Use with router

The goTo function can be individually imported and invoked anywhere. This is particularly useful when hooking up to vue-router.

// src/router.js

import Router from 'vue-router'
import goTo from 'vuetify/lib/services/goto'

export default new Router({
  scrollBehavior: (to, from, savedPosition) => {
    let scrollTo = 0

    if (to.hash) {
      scrollTo = to.hash
    } else if (savedPosition) {
      scrollTo = savedPosition.y
    }

    return goTo(scrollTo)
  },
  routes: [
    //
  ],
})

Ready for more?

Continue your learning with related content selected by the Team or move between pages by using the navigation links below.
Edit this page on GitHub
Last updated:11/12/2024, 6:59:50 AM