From 4eeae8cb1bac64d475ac76dfae890e18cdc7c88b Mon Sep 17 00:00:00 2001
From: John Leider <9064066+johnleider@users.noreply.github.com>
Date: Fri, 19 Jan 2024 14:36:48 -0600
Subject: [PATCH] feat(goTo): port to v3 (#19046)

closes #5732
closes #13538

Co-authored-by: Yuchao <yuchao.sydneyuni@gmail.com>
---
 .../api-generator/src/locale/en/useGoTo.json  |   6 +
 .../docs/src/components/app/BackToTop.vue     |  19 +-
 packages/docs/src/data/nav.json               |   1 +
 packages/docs/src/data/page-to-api.json       |   2 +-
 packages/docs/src/examples/scroll/usage.vue   | 448 +++++++++++++-----
 packages/docs/src/examples/v-lazy/usage.vue   |  22 +-
 .../docs/src/pages/en/features/scrolling.md   |  20 +-
 packages/docs/src/plugins/icons.ts            |  56 ++-
 .../composables/__tests__/goto.spec.cy.tsx    |  95 ++++
 packages/vuetify/src/composables/goto.ts      | 164 +++++++
 packages/vuetify/src/composables/index.ts     |   2 +
 packages/vuetify/src/framework.ts             |   6 +
 12 files changed, 679 insertions(+), 162 deletions(-)
 create mode 100644 packages/api-generator/src/locale/en/useGoTo.json
 create mode 100644 packages/vuetify/src/composables/__tests__/goto.spec.cy.tsx
 create mode 100644 packages/vuetify/src/composables/goto.ts

diff --git a/packages/api-generator/src/locale/en/useGoTo.json b/packages/api-generator/src/locale/en/useGoTo.json
new file mode 100644
index 00000000000..1821473d563
--- /dev/null
+++ b/packages/api-generator/src/locale/en/useGoTo.json
@@ -0,0 +1,6 @@
+{
+  "exposed": {
+    "rtl": "The current RTL state.",
+    "options": "The current goTo scrolling options."
+  }
+}
diff --git a/packages/docs/src/components/app/BackToTop.vue b/packages/docs/src/components/app/BackToTop.vue
index ef8fd5e0583..b37cfbe26e5 100644
--- a/packages/docs/src/components/app/BackToTop.vue
+++ b/packages/docs/src/components/app/BackToTop.vue
@@ -15,7 +15,7 @@
           elevation="8"
           icon="mdi-chevron-up"
           size="large"
-          @click="onClick"
+          @click="goTo(0)"
         />
       </v-fab-transition>
     </div>
@@ -23,20 +23,19 @@
 </template>
 
 <script setup>
-  import { ref } from 'vue'
+  // Composables
+  import { useGoTo } from 'vuetify'
 
-  const model = ref(false)
+  // Utilities
+  import { shallowRef } from 'vue'
+
+  const goTo = useGoTo({ layout: true })
+
+  const model = shallowRef(false)
 
   function onScroll () {
     model.value = window.scrollY > 200
   }
-
-  function onClick () {
-    window.scrollTo({
-      top: 0,
-      behavior: 'smooth',
-    })
-  }
 </script>
 
 <style scoped>
diff --git a/packages/docs/src/data/nav.json b/packages/docs/src/data/nav.json
index 14ca17ec05f..fb3f45000a7 100644
--- a/packages/docs/src/data/nav.json
+++ b/packages/docs/src/data/nav.json
@@ -42,6 +42,7 @@
       "global-configuration",
       "icon-fonts",
       "internationalization",
+      "scrolling",
       "sass-variables",
       "theme",
       "treeshaking"
diff --git a/packages/docs/src/data/page-to-api.json b/packages/docs/src/data/page-to-api.json
index 249283e354d..91e51a644f9 100644
--- a/packages/docs/src/data/page-to-api.json
+++ b/packages/docs/src/data/page-to-api.json
@@ -153,9 +153,9 @@
   "directives/touch": ["v-touch"],
   "features/dates": ["useDate"],
   "features/display-and-platform": ["useDisplay"],
+  "features/scrolling": ["useGoTo"],
   "features/global-configuration": ["VDefaultsProvider"],
   "features/internationalization": ["useLocale", "VLocaleProvider"],
-  "features/scrolling": ["$vuetify"],
   "features/theme": ["VThemeProvider"],
   "styles/transitions": [
     "VDialogBottomTransition",
diff --git a/packages/docs/src/examples/scroll/usage.vue b/packages/docs/src/examples/scroll/usage.vue
index 66a9f1198ef..81cd19f0fae 100644
--- a/packages/docs/src/examples/scroll/usage.vue
+++ b/packages/docs/src/examples/scroll/usage.vue
@@ -1,133 +1,365 @@
 <template>
-  <v-container>
-    <v-row>
-      <v-col cols="12">
-        <h3
-          ref="radio"
-          class="text-h5"
-        >
-          Target
-        </h3>
-
-        <v-radio-group
-          v-model="type"
-          row
-        >
-          <v-radio
+  <v-sheet rounded="b" border>
+    <v-container fluid>
+      <v-row>
+        <v-col cols="12" md="6">
+          <v-select
+            v-model="target"
+            :items="targets"
+            hide-details
+            label="Target"
+            prepend-inner-icon="mdi-bullseye"
+            variant="outlined"
+          ></v-select>
+        </v-col>
+
+        <v-col cols="12" md="6">
+          <v-text-field
+            v-if="target === 'By Number'"
+            v-model.number="number"
+            hide-details
             label="Number"
-            value="number"
-          ></v-radio>
-
-          <v-radio
-            label="Selector"
-            value="selector"
-          ></v-radio>
-
-          <v-radio
-            label="DOMElement"
-            value="element"
-          ></v-radio>
-        </v-radio-group>
-
-        <v-text-field
-          v-if="type === 'number'"
-          v-model="number"
-          type="number"
-          label="Number"
-        ></v-text-field>
-
-        <v-select
-          v-if="type === 'selector'"
-          v-model="selector"
-          label="Selector"
-          :items="selections"
-        ></v-select>
-
-        <v-select
-          v-if="type === 'element'"
-          v-model="selected"
-          :items="elements"
-          label="DOMElement"
-        ></v-select>
-      </v-col>
-
-      <v-col cols="12">
-        <h3 class="text-h5">
-          Options
-        </h3>
-
-        <v-select
-          v-model="easing"
-          :items="easings"
-          label="Easing"
-        ></v-select>
-
-        <v-slider
-          v-model="duration"
-          min="0"
-          max="1000"
-          label="Duration"
-          thumb-label
-        ></v-slider>
-
-        <v-slider
-          v-model="offset"
-          min="-500"
-          max="500"
-          label="Offset"
-          thumb-label
-        ></v-slider>
-      </v-col>
-
-      <v-col>
+            max="2000"
+            min="0"
+            prepend-inner-icon="mdi-numeric"
+            step="1"
+            type="number"
+            variant="outlined"
+            @keydown.enter="onClick"
+          ></v-text-field>
+
+          <v-select
+            v-else-if="target === 'By Query Selector'"
+            v-model="query"
+            :items="queries"
+            hide-details
+            label="Query Selector"
+            prepend-inner-icon="mdi-format-header-1"
+            variant="outlined"
+          ></v-select>
+
+          <v-select
+            v-else
+            v-model="component"
+            :items="components"
+            hide-details
+            label="Component / Element"
+            prepend-inner-icon="mdi-card-bulleted"
+            variant="outlined"
+          ></v-select>
+        </v-col>
+
+        <v-col cols="12" md="6">
+          <v-select
+            v-model="easing"
+            :items="easings"
+            hide-details
+            label="Easing"
+            prepend-inner-icon="mdi-sine-wave"
+            variant="outlined"
+          ></v-select>
+        </v-col>
+
+        <v-col cols="12" md="6">
+          <v-text-field
+            v-model.number="duration"
+            hide-details
+            label="Duration"
+            max="2000"
+            min="50"
+            prepend-inner-icon="mdi-timer-sand"
+            step="1"
+            type="number"
+            variant="outlined"
+          ></v-text-field>
+        </v-col>
+
+        <v-col cols="12">
+          <v-slider
+            v-model="offset"
+            append-icon="mdi-axis-arrow"
+            hide-details
+            label="Offset"
+            max="100"
+            min="-100"
+            step="1"
+            thumb-label
+          ></v-slider>
+        </v-col>
+
+        <v-divider class="my-3 mx-n1"></v-divider>
+
+        <v-col cols="10" class="mt-n2">
+          <v-btn
+            block
+            color="surface-variant"
+            variant="flat"
+            text="Go To"
+            @click="onClick"
+          ></v-btn>
+        </v-col>
+
+        <v-col cols="2" class="mt-n2">
+          <v-btn
+            block
+            text="Reset"
+            variant="outlined"
+            color="error"
+            @click="onClickReset"
+          ></v-btn>
+        </v-col>
+      </v-row>
+    </v-container>
+
+    <v-divider></v-divider>
+
+    <div
+      id="goto-container-example"
+      class="overflow-auto"
+      style="max-height: 400px;"
+    >
+      <v-sheet
+        class="pa-4"
+        color="surface-light"
+      >
+        <div id="heading-1" class="text-h5">Heading 1</div>
+
+        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, ratione debitis quis est labore voluptatibus! Eaque cupiditate minima, at placeat totam, magni doloremque veniam neque porro libero rerum unde voluptatem!</p>
+
+        <br>
+
+        <v-card
+          :ref="instance => cards.card1 = instance"
+          flat
+          title="Card 1"
+          text="Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, ratione debitis quis est labore voluptatibus! Eaque cupiditate minima, at placeat totam, magni doloremque veniam neque porro libero rerum unde voluptatem! Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, ratione debitis quis est labore voluptatibus! Eaque cupiditate minima, at placeat totam, magni doloremque veniam neque porro libero rerum unde voluptatem!"
+        ></v-card>
+
+        <div style="height: 420px;"></div>
+
+        <div id="heading-2" class="text-h5">Heading 2</div>
+
+        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, ratione debitis quis est labore voluptatibus! Eaque cupiditate minima, at placeat totam, magni doloremque veniam neque porro libero rerum unde voluptatem!</p>
+
+        <br>
+
+        <v-card
+          :ref="instance => cards.card2 = instance"
+          flat
+          title="Card 2"
+          text="Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, ratione debitis quis est labore voluptatibus! Eaque cupiditate minima, at placeat totam, magni doloremque veniam neque porro libero rerum unde voluptatem! Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, ratione debitis quis est labore voluptatibus! Eaque cupiditate minima, at placeat totam, magni doloremque veniam neque porro libero rerum unde voluptatem!"
+        ></v-card>
+
+        <div style="height: 420px;"></div>
+
+        <div id="heading-3" class="text-h5">Heading 3</div>
+
+        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, ratione debitis quis est labore voluptatibus! Eaque cupiditate minima, at placeat totam, magni doloremque veniam neque porro libero rerum unde voluptatem!</p>
+
+        <br>
+
+        <v-card
+          :ref="instance => cards.card3 = instance"
+          flat
+          title="Card 3"
+          text="Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, ratione debitis quis est labore voluptatibus! Eaque cupiditate minima, at placeat totam, magni doloremque veniam neque porro libero rerum unde voluptatem! Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, ratione debitis quis est labore voluptatibus! Eaque cupiditate minima, at placeat totam, magni doloremque veniam neque porro libero rerum unde voluptatem!"
+        ></v-card>
+
+        <div style="height: 420px;"></div>
+
+        <div id="heading-4" class="text-h5">Heading 4</div>
+
+        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, ratione debitis quis est labore voluptatibus! Eaque cupiditate minima, at placeat totam, magni doloremque veniam neque porro libero rerum unde voluptatem!</p>
+
+        <br>
+
+        <v-card
+          :ref="instance => cards.card4 = instance"
+          flat
+          title="Card 4"
+          text="Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, ratione debitis quis est labore voluptatibus! Eaque cupiditate minima, at placeat totam, magni doloremque veniam neque porro libero rerum unde voluptatem! Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, ratione debitis quis est labore voluptatibus! Eaque cupiditate minima, at placeat totam, magni doloremque veniam neque porro libero rerum unde voluptatem!"
+        ></v-card>
+
+        <div style="height: 180px;"></div>
+
         <v-btn
-          ref="button"
-          block
-          color="primary"
-          @click="$vuetify.goTo(target, options)"
-        >
-          scroll
-        </v-btn>
-      </v-col>
-    </v-row>
-  </v-container>
+          append-icon="mdi-arrow-up-bold"
+          text="Back to Top"
+          variant="tonal"
+          @click="goTo(0, { container: '#goto-container-example' })"
+        ></v-btn>
+      </v-sheet>
+    </div>
+  </v-sheet>
 </template>
 
+<script setup>
+  import { computed, ref } from 'vue'
+  import { useGoTo } from 'vuetify'
+
+  const goTo = useGoTo()
+
+  const duration = ref(300)
+  const number = ref(500)
+  const offset = ref(0)
+  const cards = {
+    card1: ref(null),
+    card2: ref(null),
+    card3: ref(null),
+    card4: ref(null),
+  }
+  const component = ref('card3')
+  const components = [
+    { title: 'Card 1', value: 'card1' },
+    { title: 'Card 2', value: 'card2' },
+    { title: 'Card 3', value: 'card3' },
+    { title: 'Card 4', value: 'card4' },
+  ]
+  const query = ref('#heading-3')
+  const queries = [
+    '#heading-1',
+    '#heading-2',
+    '#heading-3',
+    '#heading-4',
+  ]
+  const target = ref('By Number')
+  const targets = [
+    'By Number',
+    'By Query Selector',
+    'By Component / Element',
+  ]
+  const easing = ref('easeInOutCubic')
+  const easings = [
+    'linear',
+    'easeInQuad',
+    'easeOutQuad',
+    'easeInOutQuad',
+    'easeInCubic',
+    'easeOutCubic',
+    'easeInOutCubic',
+    'easeInQuart',
+    'easeOutQuart',
+    'easeInOutQuart',
+    'easeInQuint',
+    'easeOutQuint',
+    'easeInOutQuint',
+  ]
+
+  const options = computed(() => ({
+    container: '#goto-container-example',
+    duration: duration.value,
+    easing: easing.value,
+    offset: offset.value,
+  }))
+
+  function onClick () {
+    if (target.value === 'By Number') {
+      goTo(number.value, options.value)
+    } else if (target.value === 'By Query Selector') {
+      goTo(query.value, options.value)
+    } else if (target.value === 'By Component / Element') {
+      goTo(cards[component.value].$el, options.value)
+    }
+  }
+
+  function onClickReset () {
+    component.value = 'card3'
+    duration.value = 300
+    easing.value = 'easeInOutCubic'
+    number.value = 500
+    offset.value = 0
+    query.value = '#heading-3'
+    target.value = 'By Number'
+
+    goTo(0, { container: '#goto-container-example' })
+  }
+</script>
+
 <script>
-  import * as easings from 'vuetify/lib/services/goto/easing-patterns'
+  import { useGoTo } from 'vuetify'
 
   export default {
     data () {
       return {
-        type: 'number',
-        number: 9999,
-        selector: '#first',
-        selections: ['#first', '#second', '#third'],
-        selected: 'Button',
-        elements: ['Button', 'Radio group'],
         duration: 300,
+        number: 500,
         offset: 0,
+        cards: {
+          card1: null,
+          card2: null,
+          card3: null,
+          card4: null,
+        },
+        component: 'card3',
+        components: [
+          { title: 'Card 1', value: 'card1' },
+          { title: 'Card 2', value: 'card2' },
+          { title: 'Card 3', value: 'card3' },
+          { title: 'Card 4', value: 'card4' },
+        ],
+        query: '#heading-3',
+        queries: [
+          '#heading-1',
+          '#heading-2',
+          '#heading-3',
+          '#heading-4',
+        ],
+        target: 'By Number',
+        targets: [
+          'By Number',
+          'By Query Selector',
+          'By Component / Element',
+        ],
         easing: 'easeInOutCubic',
-        easings: Object.keys(easings),
+        easings: [
+          'linear',
+          'easeInQuad',
+          'easeOutQuad',
+          'easeInOutQuad',
+          'easeInCubic',
+          'easeOutCubic',
+          'easeInOutCubic',
+          'easeInQuart',
+          'easeOutQuart',
+          'easeInOutQuart',
+          'easeInQuint',
+          'easeOutQuint',
+          'easeInOutQuint',
+        ],
       }
     },
     computed: {
-      target () {
-        const value = this[this.type]
-        if (!isNaN(value)) return Number(value)
-        else return value
-      },
       options () {
         return {
+          container: '#goto-container-example',
           duration: this.duration,
-          offset: this.offset,
           easing: this.easing,
+          offset: this.offset,
+        }
+      },
+    },
+    methods: {
+      onClick () {
+        const goTo = useGoTo()
+        if (this.target === 'By Number') {
+          goTo(this.number, this.options)
+        } else if (this.target === 'By Query Selector') {
+          goTo(this.query, this.options)
+        } else if (this.target === 'By Component / Element') {
+          goTo(this.cards[this.component].$el, this.options)
         }
       },
-      element () {
-        if (this.selected === 'Button') return this.$refs.button
-        else if (this.selected === 'Radio group') return this.$refs.radio
-        else return null
+      onClickReset () {
+        this.component = 'card3'
+        this.duration = 300
+        this.easing = 'easeInOutCubic'
+        this.number = 500
+        this.offset = 0
+        this.query = '#heading-3'
+        this.target = 'By Number'
+
+        const goTo = useGoTo()
+        goTo(0, { container: '#goto-container-example' })
       },
     },
   }
diff --git a/packages/docs/src/examples/v-lazy/usage.vue b/packages/docs/src/examples/v-lazy/usage.vue
index 933c6b070d1..4c79e9d10b2 100644
--- a/packages/docs/src/examples/v-lazy/usage.vue
+++ b/packages/docs/src/examples/v-lazy/usage.vue
@@ -51,25 +51,25 @@
 </template>
 
 <script setup>
+  // Composables
+  import { useGoTo } from 'vuetify'
+
   // Utilities
-  import { computed, ref } from 'vue'
+  import { computed, ref, shallowRef } from 'vue'
   import { propsToString } from '@/util/helpers'
 
+  const goTo = useGoTo()
+
   const name = 'v-lazy'
-  const model = ref('default')
-  const isActive = ref(false)
+  const model = shallowRef('default')
+  const isActive = shallowRef(false)
   const responsive = ref()
   const options = []
 
-  function reset () {
-    responsive.value.$el.scrollTo({
-      top: 0,
-      behavior: 'smooth',
-    })
+  async function reset () {
+    await goTo(0, { container: responsive.value.$el })
 
-    setTimeout(() => {
-      isActive.value = false
-    }, 300)
+    isActive.value = false
   }
 
   const props = computed(() => {
diff --git a/packages/docs/src/pages/en/features/scrolling.md b/packages/docs/src/pages/en/features/scrolling.md
index c2c103e56d0..48527c895fb 100644
--- a/packages/docs/src/pages/en/features/scrolling.md
+++ b/packages/docs/src/pages/en/features/scrolling.md
@@ -1,18 +1,22 @@
 ---
-disabled: true
+emphasized: true
 meta:
   title: Programmatic scrolling
-  description: Programmatic scrolling within an application can be handled using the goTo method included in the vuetify object.
+  description: Handle scrolling within your application by using the goTo function
   keywords: programmatic scrolling, vuetify goto, goto
 related:
   - /directives/scroll/
-  - /styles/content/
-  - /components/app-bars/
+  - /features/application-layout/
+  - /components/slide-groups/
+features:
+  github: /composables/goto.ts
+  label: 'E: goto'
+  report: true
 ---
 
 # 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.
+Handle scrolling within your application by using the **goTo** function.
 
 <page-features />
 
@@ -28,11 +32,11 @@ The **goTo** method takes two parameters **target** and **options**. **target**
 
 | Directive | Description |
 | - | - |
-| [scroll](/api/v-scroll/) | The scroll directive |
+| [useGoTo](/api/use-go-to/) | The useGoTo composable |
 
 <api-inline hide-links />
 
-## Use with router
+<!--## Use with router
 
 The **goTo** function can be individually imported and invoked anywhere. This is particularly useful when hooking up to [vue-router](https://router.vuejs.org/).
 
@@ -56,4 +60,4 @@ export default new Router({
     //
   ],
 })
-```
+``` -->
diff --git a/packages/docs/src/plugins/icons.ts b/packages/docs/src/plugins/icons.ts
index 388d5e0e2de..3151b84a869 100644
--- a/packages/docs/src/plugins/icons.ts
+++ b/packages/docs/src/plugins/icons.ts
@@ -31,7 +31,9 @@ export {
   mdiArrowRightBoldBoxOutline,
   mdiArrowRightThick,
   mdiArrowUp,
+  mdiArrowUpBold,
   mdiArrowUpBoldBoxOutline,
+  mdiAxisArrow,
   mdiBattery,
   mdiBeaker,
   mdiBeakerOutline,
@@ -43,10 +45,10 @@ export {
   mdiBike,
   mdiBlinds,
   mdiBook,
-  mdiBookVariant,
   mdiBookmark,
   mdiBookmarkMinus,
   mdiBookmarkOutline,
+  mdiBookVariant,
   mdiBottleTonicPlus,
   mdiBriefcase,
   mdiBriefcaseVariant,
@@ -54,9 +56,10 @@ export {
   mdiBrightness5,
   mdiBroadcast,
   mdiBrush,
+  mdiBugOutline,
   mdiBullhorn,
   mdiBullhornOutline,
-  mdiBugOutline,
+  mdiBullseye,
   mdiCached,
   mdiCakeVariant,
   mdiCalendar,
@@ -65,17 +68,18 @@ export {
   mdiCallSplit,
   mdiCamera,
   mdiCancel,
+  mdiCardBulleted,
   mdiCart,
   mdiCartOutline,
   mdiCellphone,
   mdiCheck,
   mdiCheckBold,
-  mdiCheckCircle,
-  mdiCheckCircleOutline,
-  mdiCheckOutline,
   mdiCheckboxBlankOutline,
   mdiCheckboxMarked,
   mdiCheckboxMarkedCircle,
+  mdiCheckCircle,
+  mdiCheckCircleOutline,
+  mdiCheckOutline,
   mdiChevronDoubleLeft,
   mdiChevronDoubleRight,
   mdiChevronDown,
@@ -87,7 +91,9 @@ export {
   mdiCircleHalf,
   mdiCircleOutline,
   mdiCity,
+  mdiClipboardMultipleOutline,
   mdiClipboardText,
+  mdiClipboardTextOutline,
   mdiClock,
   mdiClockOutline,
   mdiClockStart,
@@ -101,16 +107,15 @@ export {
   mdiCodeJson,
   mdiCodeTags,
   mdiCog,
-  mdiCogs,
   mdiCogOutline,
-  mdiCookie,
+  mdiCogs,
   mdiComment,
   mdiCompassOutline,
   mdiContentCopy,
   mdiContentSave,
   mdiContentSaveCogOutline,
-  mdiClipboardMultipleOutline,
-  mdiClipboardTextOutline,
+  mdiControllerClassicOutline,
+  mdiCookie,
   mdiCrosshairsGps,
   mdiCrown,
   mdiCupcake,
@@ -123,19 +128,19 @@ export {
   mdiDomain,
   mdiDotsHorizontal,
   mdiDotsVertical,
-  mdiDropbox,
   mdiDownloadBoxOutline,
+  mdiDropbox,
   mdiEmail,
   mdiEmailOpen,
   mdiEmailOpenOutline,
   mdiEmailOutline,
   mdiEmoticon,
-  mdiEmoticonOutline,
   mdiEmoticonCool,
   mdiEmoticonDead,
   mdiEmoticonExcited,
   mdiEmoticonHappy,
   mdiEmoticonNeutral,
+  mdiEmoticonOutline,
   mdiEmoticonSad,
   mdiEmoticonTongue,
   mdiExport,
@@ -171,6 +176,7 @@ export {
   mdiFormatBold,
   mdiFormatColorFill,
   mdiFormatColorText,
+  mdiFormatHeader1,
   mdiFormatItalic,
   mdiFormatListBulletedSquare,
   mdiFormatTextdirectionLToR,
@@ -180,7 +186,6 @@ export {
   mdiForum,
   mdiForward,
   mdiFunction,
-  mdiControllerClassicOutline,
   mdiGavel,
   mdiGestureTapButton,
   mdiGithub,
@@ -199,9 +204,9 @@ export {
   mdiHumanMaleFemaleChild,
   mdiIceCream,
   mdiImage,
-  mdiImageOutline,
   mdiImageEdit,
   mdiImageEditOutline,
+  mdiImageOutline,
   mdiInboxArrowDown,
   mdiInformation,
   mdiInformationOutline,
@@ -250,25 +255,26 @@ export {
   mdiNature,
   mdiNewspaperVariantOutline,
   mdiNodejs,
+  mdiNumeric,
   mdiNumeric0,
-  mdiNumeric1,
-  mdiNumeric2,
-  mdiNumeric3,
-  mdiNumeric4,
-  mdiNumeric5,
-  mdiNumeric6,
-  mdiNumeric7,
-  mdiNumeric8,
-  mdiNumeric9,
   mdiNumeric0Box,
+  mdiNumeric1,
   mdiNumeric1Box,
+  mdiNumeric2,
   mdiNumeric2Box,
+  mdiNumeric3,
   mdiNumeric3Box,
+  mdiNumeric4,
   mdiNumeric4Box,
+  mdiNumeric5,
   mdiNumeric5Box,
+  mdiNumeric6,
   mdiNumeric6Box,
+  mdiNumeric7,
   mdiNumeric7Box,
+  mdiNumeric8,
   mdiNumeric8Box,
+  mdiNumeric9,
   mdiNumeric9Box,
   mdiOpenInNew,
   mdiPackage,
@@ -318,10 +324,11 @@ export {
   mdiSignalCellularOutline,
   mdiSilverware,
   mdiSilverwareForkKnife,
+  mdiSineWave,
   mdiSkipNext,
   mdiSkipPrevious,
-  mdiSourceCommit,
   mdiSnowflake,
+  mdiSourceCommit,
   mdiSpaceInvaders,
   mdiSpeedometer,
   mdiSpeedometerMedium,
@@ -333,8 +340,8 @@ export {
   mdiStarOutline,
   mdiStoreOutline,
   mdiSvg,
-  mdiTablet,
   mdiTable,
+  mdiTablet,
   mdiTag,
   mdiTagOutline,
   mdiTarget,
@@ -344,6 +351,7 @@ export {
   mdiThumbDown,
   mdiThumbUp,
   mdiTicket,
+  mdiTimerSand,
   mdiTranslate,
   mdiTriangle,
   mdiTwitter,
diff --git a/packages/vuetify/src/composables/__tests__/goto.spec.cy.tsx b/packages/vuetify/src/composables/__tests__/goto.spec.cy.tsx
new file mode 100644
index 00000000000..4ebcb45231f
--- /dev/null
+++ b/packages/vuetify/src/composables/__tests__/goto.spec.cy.tsx
@@ -0,0 +1,95 @@
+/* eslint-disable cypress/no-unnecessary-waiting */
+/// <reference types="../../../types/cypress" />
+
+// Utilities
+import { defineComponent } from 'vue'
+import { useGoTo } from '../goto'
+import { useRender } from '@/util'
+
+const ComponentA = defineComponent({
+  props: {
+    id: String,
+    target: String,
+  },
+
+  setup (props) {
+    const goTo = useGoTo()
+
+    function onClick () {
+      return goTo(props.target!)
+    }
+
+    useRender(() => (
+      <button id={ props.id } onClick={ onClick }>Click me</button>
+    ))
+
+    return {}
+  },
+})
+
+const ComponentB = defineComponent({
+  props: {
+    id: String,
+    target: String,
+    container: String,
+  },
+
+  setup (props) {
+    const goTo = useGoTo()
+
+    function onClick () {
+      return goTo.horizontal(props.target!, { container: props.container })
+    }
+
+    useRender(() => (
+      <button id={ props.id } onClick={ onClick }>Click me</button>
+    ))
+
+    return {}
+  },
+})
+
+describe('goto', () => {
+  it('should scroll vertical', () => {
+    cy
+      .mount(() => (
+        <div>
+          <ComponentA id="top" target="#bottom" />
+
+          <div style="height: 2000px;" />
+
+          <ComponentA id="bottom" target="#top" />
+        </div>
+      ))
+      .get('#top').click()
+      .window().should(win => {
+        expect(win.scrollY).to.equal(1223)
+      })
+      .get('#bottom').click()
+      .window().should(win => {
+        expect(win.scrollY).to.equal(0)
+      })
+  })
+
+  // TODO: find a better way to test this
+  it('should scroll horizontal', () => {
+    cy
+      .mount(() => (
+        <div id="container" style="overflow-x: auto;">
+          <ComponentB id="start" target="#end" container="parent" />
+
+          <ComponentB id="end" target="#start" container="parent" style="margin-inline-start: 2000px;" />
+        </div>
+      ))
+      .get('#start').click()
+      .wait(500)
+      .get('#container').then($el => {
+        expect($el[0].scrollLeft).to.equal(975)
+      })
+      .get('#end').click()
+      .wait(500)
+      .get('#container').then($el => {
+        expect($el[0].scrollLeft).to.equal(0)
+      })
+  })
+})
diff --git a/packages/vuetify/src/composables/goto.ts b/packages/vuetify/src/composables/goto.ts
new file mode 100644
index 00000000000..1d6480f077c
--- /dev/null
+++ b/packages/vuetify/src/composables/goto.ts
@@ -0,0 +1,164 @@
+// Utilities
+import { inject } from 'vue'
+import { mergeDeep, refElement } from '@/util'
+
+// Types
+import type { ComponentPublicInstance, InjectionKey, Ref } from 'vue'
+import type { LocaleInstance, RtlInstance } from './locale'
+
+export interface GoToInstance {
+  rtl: Ref<boolean>
+  options: GoToOptions
+}
+
+export interface GoToOptions {
+  container: ComponentPublicInstance | HTMLElement | string
+  duration: number
+  layout: boolean
+  offset: number
+  easing: string | ((t: number) => number)
+  patterns: Record<string, (t: number) => number>
+}
+
+export const GoToSymbol: InjectionKey<GoToInstance> = Symbol.for('vuetify:goto')
+
+function genDefaults () {
+  return {
+    container: undefined,
+    duration: 300,
+    layout: false,
+    offset: 0,
+    easing: 'easeInOutCubic',
+    patterns: {
+      linear: (t: number) => t,
+      easeInQuad: (t: number) => t ** 2,
+      easeOutQuad: (t: number) => t * (2 - t),
+      easeInOutQuad: (t: number) => (t < 0.5 ? 2 * t ** 2 : -1 + (4 - 2 * t) * t),
+      easeInCubic: (t: number) => t ** 3,
+      easeOutCubic: (t: number) => --t ** 3 + 1,
+      easeInOutCubic: (t: number) => t < 0.5 ? 4 * t ** 3 : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1,
+      easeInQuart: (t: number) => t ** 4,
+      easeOutQuart: (t: number) => 1 - --t ** 4,
+      easeInOutQuart: (t: number) => (t < 0.5 ? 8 * t ** 4 : 1 - 8 * --t ** 4),
+      easeInQuint: (t: number) => t ** 5,
+      easeOutQuint: (t: number) => 1 + --t ** 5,
+      easeInOutQuint: (t: number) => t < 0.5 ? 16 * t ** 5 : 1 + 16 * --t ** 5,
+    },
+  }
+}
+
+function getContainer (el?: ComponentPublicInstance | HTMLElement | string) {
+  return getTarget(el) ?? (document.scrollingElement || document.body) as HTMLElement
+}
+
+function getTarget (el: ComponentPublicInstance | HTMLElement | string | undefined) {
+  return (typeof el === 'string') ? document.querySelector<HTMLElement>(el) : refElement(el)
+}
+
+function getOffset (target: any, horizontal?: boolean, rtl?: boolean): number {
+  if (typeof target === 'number') return horizontal && rtl ? -target : target
+
+  let el = getTarget(target)
+  let totalOffset = 0
+  while (el) {
+    totalOffset += horizontal ? el.offsetLeft : el.offsetTop
+    el = el.offsetParent as HTMLElement
+  }
+
+  return totalOffset
+}
+
+export function createGoTo (options: Partial<GoToOptions> | undefined, locale: LocaleInstance & RtlInstance) {
+  return {
+    rtl: locale.isRtl,
+    options: mergeDeep(genDefaults(), options),
+  }
+}
+
+async function scrollTo (
+  _target: ComponentPublicInstance | HTMLElement | number | string,
+  _options: Partial<GoToOptions>,
+  horizontal?: boolean,
+  goTo?: GoToInstance,
+) {
+  const options = mergeDeep(goTo?.options, _options)
+  const rtl = goTo?.rtl.value
+  const target = (typeof _target === 'number' ? _target : getTarget(_target)) ?? 0
+  const container = options.container === 'parent' && target instanceof HTMLElement
+    ? target.parentElement!
+    : getContainer(options.container)
+  const ease = typeof options.easing === 'function' ? options.easing : options.patterns[options.easing]
+
+  if (!ease) throw new TypeError(`Easing function "${options.easing}" not found.`)
+
+  let targetLocation: number
+  if (typeof target === 'number') {
+    targetLocation = getOffset(target, horizontal, rtl)
+  } else {
+    targetLocation = getOffset(target, horizontal, rtl) - getOffset(container, horizontal, rtl)
+
+    if (options.layout) {
+      const styles = window.getComputedStyle(target)
+      const layoutOffset = styles.getPropertyValue('--v-layout-top')
+
+      if (layoutOffset) targetLocation -= parseInt(layoutOffset, 10)
+    }
+  }
+
+  targetLocation += options.offset
+
+  const startLocation = (horizontal ? container.scrollLeft : container.scrollTop) ?? 0
+
+  if (targetLocation === startLocation) return Promise.resolve(targetLocation)
+
+  const startTime = performance.now()
+
+  return new Promise(resolve => requestAnimationFrame(function step (currentTime: number) {
+    const timeElapsed = currentTime - startTime
+    const progress = Math.abs(options.duration ? Math.min(timeElapsed / options.duration, 1) : 1)
+    const location = Math.floor(startLocation + (targetLocation - startLocation) * ease(progress))
+
+    container[horizontal ? 'scrollLeft' : 'scrollTop'] = location
+
+    if (progress === 1) return resolve(targetLocation)
+
+    let clientSize
+    let reachEnd
+
+    if (!horizontal) {
+      clientSize = container === document.body ? document.documentElement.clientHeight : container.clientHeight
+      reachEnd = clientSize + container.scrollTop >= container.scrollHeight
+
+      if (targetLocation > container.scrollTop && reachEnd) return resolve(targetLocation)
+    } else {
+      clientSize = container === document.body ? document.documentElement.clientWidth : container.clientWidth
+      reachEnd = clientSize + container.scrollLeft >= container.scrollWidth
+
+      if (targetLocation > container.scrollLeft && reachEnd) return resolve(targetLocation)
+    }
+
+    requestAnimationFrame(step)
+  }))
+}
+
+export function useGoTo (_options: Partial<GoToOptions> = {}) {
+  const goTo = inject(GoToSymbol)
+
+  if (!goTo) throw new Error('[Vuetify] Could not find injected goto instance')
+
+  async function go (
+    target: ComponentPublicInstance | HTMLElement | string | number,
+    options?: Partial<GoToOptions>,
+  ) {
+    return scrollTo(target, mergeDeep(_options, options), false, goTo)
+  }
+
+  go.horizontal = async (
+    target: ComponentPublicInstance | HTMLElement | string | number,
+    options?: Partial<GoToOptions>,
+  ) => {
+    return scrollTo(target, mergeDeep(_options, options), true, goTo)
+  }
+
+  return go
+}
diff --git a/packages/vuetify/src/composables/index.ts b/packages/vuetify/src/composables/index.ts
index 33a5e557e20..231e1e3705a 100644
--- a/packages/vuetify/src/composables/index.ts
+++ b/packages/vuetify/src/composables/index.ts
@@ -6,6 +6,7 @@
 export { useDate } from './date'
 export { useDefaults } from './defaults'
 export { useDisplay } from './display'
+export { useGoTo } from './goto'
 export { useLayout } from './layout'
 export { useLocale, useRtl } from './locale'
 export { useTheme } from './theme'
@@ -14,6 +15,7 @@ export type { DateInstance } from './date'
 export type { DefaultsInstance } from './defaults'
 export type { DisplayBreakpoint, DisplayInstance, DisplayThresholds } from './display'
 export type { SubmitEventPromise } from './form'
+export type { GoToInstance } from './goto'
 export type { IconAliases, IconProps, IconSet, IconOptions } from './icons'
 export type { LocaleInstance, LocaleMessages, RtlInstance, LocaleOptions, RtlOptions } from './locale'
 export type { ThemeDefinition, ThemeInstance } from './theme'
diff --git a/packages/vuetify/src/framework.ts b/packages/vuetify/src/framework.ts
index ae3f3e1b768..93d73be180b 100644
--- a/packages/vuetify/src/framework.ts
+++ b/packages/vuetify/src/framework.ts
@@ -2,6 +2,7 @@
 import { createDate, DateAdapterSymbol, DateOptionsSymbol } from '@/composables/date/date'
 import { createDefaults, DefaultsSymbol } from '@/composables/defaults'
 import { createDisplay, DisplaySymbol } from '@/composables/display'
+import { createGoTo, GoToSymbol } from '@/composables/goto'
 import { createIcons, IconSymbol } from '@/composables/icons'
 import { createLocale, LocaleSymbol } from '@/composables/locale'
 import { createTheme, ThemeSymbol } from '@/composables/theme'
@@ -15,6 +16,7 @@ import type { App, ComponentPublicInstance, InjectionKey } from 'vue'
 import type { DateOptions } from '@/composables/date'
 import type { DefaultsOptions } from '@/composables/defaults'
 import type { DisplayOptions, SSROptions } from '@/composables/display'
+import type { GoToOptions } from '@/composables/goto'
 import type { IconOptions } from '@/composables/icons'
 import type { LocaleOptions, RtlOptions } from '@/composables/locale'
 import type { ThemeOptions } from '@/composables/theme'
@@ -29,6 +31,7 @@ export interface VuetifyOptions {
   directives?: Record<string, any>
   defaults?: DefaultsOptions
   display?: DisplayOptions
+  goTo?: GoToOptions
   theme?: ThemeOptions
   icons?: IconOptions
   locale?: LocaleOptions & RtlOptions
@@ -52,6 +55,7 @@ export function createVuetify (vuetify: VuetifyOptions = {}) {
   const icons = createIcons(options.icons)
   const locale = createLocale(options.locale)
   const date = createDate(options.date, locale)
+  const goTo = createGoTo(options.goTo, locale)
 
   const install = (app: App) => {
     for (const key in directives) {
@@ -79,6 +83,7 @@ export function createVuetify (vuetify: VuetifyOptions = {}) {
     app.provide(LocaleSymbol, locale)
     app.provide(DateOptionsSymbol, date.options)
     app.provide(DateAdapterSymbol, date.instance)
+    app.provide(GoToSymbol, goTo)
 
     if (IN_BROWSER && options.ssr) {
       if (app.$nuxt) {
@@ -124,6 +129,7 @@ export function createVuetify (vuetify: VuetifyOptions = {}) {
     icons,
     locale,
     date,
+    goTo,
   }
 }