Source: https://tanstack.com/query/v4/docs/framework/vue/guides/scroll-restoration

TanStack

Query v4v4

Search...

+ K

Auto

Log In

TanStack StartRC

Docs Examples GitHub Contributors

TanStack Router

Docs Examples GitHub Contributors

TanStack Query

Docs Examples GitHub Contributors

TanStack Table

Docs Examples Github Contributors

TanStack Formnew

Docs Examples Github Contributors

TanStack DBbeta

Docs Github Contributors

TanStack Virtual

Docs Examples Github Contributors

TanStack Paceralpha

Docs Examples Github Contributors

TanStack Storealpha

Docs Examples Github Contributors

TanStack Devtoolsalpha

Docs Github Contributors

More Libraries

Maintainers Partners Support Learn StatsBETA Discord Merch Blog GitHub Ethos Brand Guide

Documentation

Framework

Vue

Version

v4

Search...

+ K

Menu

• Home

• Frameworks

• Contributors

• Community Resources

• GitHub

• Discord

Getting Started

• Overview
  
  vue

• Installation
  
  vue

• Quick Start
  
  vue

• Devtools
  
  vue

• TypeScript
  
  vue

• GraphQL
  
  vue

Guides & Concepts

• Important Defaults
  
  vue

• Queries
  
  vue

• Query Keys
  
  vue

• Query Functions
  
  vue

• Network Mode
  
  vue

• Parallel Queries
  
  vue

• Dependent Queries
  
  vue

• Background Fetching Indicators
  
  vue

• Window Focus Refetching
  
  vue

• Disabling/Pausing Queries
  
  vue

• Query Retries
  
  vue

• Paginated Queries
  
  vue

• Infinite Queries
  
  vue

• Initial Query Data
  
  vue

• Placeholder Query Data
  
  vue

• Prefetching
  
  vue

• Mutations
  
  vue

• Query Invalidation
  
  vue

• Invalidation from Mutations
  
  vue

• Updates from Mutation
  
  vue

• Optimistic Updates
  
  vue

• Query Cancellation
  
  vue

• Scroll Restoration
  
  vue

• Filters
  
  vue

• SSR & Nuxt
  
  vue

• Caching
  
  vue

• Default Query Fn
  
  vue

• Suspense
  
  vue

• Custom Logger
  
  vue

• Custom Client
  
  vue

• Does this replace [Vuex, Pinia]?
  
  vue

Community Resources

• TkDodo's Blog
  
  vue

• Query Key Factory
  
  vue

API Reference

• QueryClient
  
  core

• QueryCache
  
  core

• MutationCache
  
  core

• QueryObserver
  
  core

• InfiniteQueryObserver
  
  core

• QueriesObserver
  
  core

• focusManager
  
  core

• onlineManager
  
  core

• useQuery
  
  vue

• useQueries
  
  vue

• useInfiniteQuery
  
  vue

• useMutation
  
  vue

• useIsFetching
  
  vue

• useIsMutating
  
  vue

• useQueryClient
  
  vue

• hydration
  
  vue

ESLint

• ESLint Plugin Query
  
  core

• Exhaustive Deps
  
  core

• No deprecated options
  
  core

• Prefer object syntax
  
  core

• Stable Query Client
  
  core

Examples

• Basic
  
  vue

• Vue 2.6
  
  vue

• Nuxt 3
  
  vue

• Persister
  
  vue

Framework

Vue

Version

v4

Menu

• Home

• Frameworks

• Contributors

• Community Resources

• GitHub

• Discord

Getting Started

• Overview
  
  vue

• Installation
  
  vue

• Quick Start
  
  vue

• Devtools
  
  vue

• TypeScript
  
  vue

• GraphQL
  
  vue

Guides & Concepts

• Important Defaults
  
  vue

• Queries
  
  vue

• Query Keys
  
  vue

• Query Functions
  
  vue

• Network Mode
  
  vue

• Parallel Queries
  
  vue

• Dependent Queries
  
  vue

• Background Fetching Indicators
  
  vue

• Window Focus Refetching
  
  vue

• Disabling/Pausing Queries
  
  vue

• Query Retries
  
  vue

• Paginated Queries
  
  vue

• Infinite Queries
  
  vue

• Initial Query Data
  
  vue

• Placeholder Query Data
  
  vue

• Prefetching
  
  vue

• Mutations
  
  vue

• Query Invalidation
  
  vue

• Invalidation from Mutations
  
  vue

• Updates from Mutation
  
  vue

• Optimistic Updates
  
  vue

• Query Cancellation
  
  vue

• Scroll Restoration
  
  vue

• Filters
  
  vue

• SSR & Nuxt
  
  vue

• Caching
  
  vue

• Default Query Fn
  
  vue

• Suspense
  
  vue

• Custom Logger
  
  vue

• Custom Client
  
  vue

• Does this replace [Vuex, Pinia]?
  
  vue

Community Resources

• TkDodo's Blog
  
  vue

• Query Key Factory
  
  vue

API Reference

• QueryClient
  
  core

• QueryCache
  
  core

• MutationCache
  
  core

• QueryObserver
  
  core

• InfiniteQueryObserver
  
  core

• QueriesObserver
  
  core

• focusManager
  
  core

• onlineManager
  
  core

• useQuery
  
  vue

• useQueries
  
  vue

• useInfiniteQuery
  
  vue

• useMutation
  
  vue

• useIsFetching
  
  vue

• useIsMutating
  
  vue

• useQueryClient
  
  vue

• hydration
  
  vue

ESLint

• ESLint Plugin Query
  
  core

• Exhaustive Deps
  
  core

• No deprecated options
  
  core

• Prefer object syntax
  
  core

• Stable Query Client
  
  core

Examples

• Basic
  
  vue

• Vue 2.6
  
  vue

• Nuxt 3
  
  vue

• Persister
  
  vue

Scroll Restoration

Copy Markdown

Traditionally, when you navigate to a previously visited page on a web browser, you would find that the page would be scrolled to the exact position where you were before you navigated away from that page. This is called scroll restoration and has been in a bit of a regression since web applications have started moving towards client side data fetching. With TanStack Query however, that's no longer the case.

Out of the box, "scroll restoration" for all queries (including paginated and infinite queries) Just Works™️ in TanStack Query. The reason for this is that query results are cached and able to be retrieved synchronously when a query is rendered. As long as your queries are being cached long enough (the default time is 5 minutes) and have not been garbage collected, scroll restoration will work out of the box all the time.

Edit on GitHub

Query Cancellation

Filters

Partners Become a Partner

[###### Want to Skip the Docs?

Query.gg - The Official React Query Course
\

“If you’re serious about *really* understanding React Query, there’s no better way than with query.gg”—Tanner Linsley

Learn More](https://query.gg/?s=tanstack)

You are currently reading v4 docs. Redirect to latest version?

Latest Hide