Skip to main content
This is documentation for Inertia.js v1, which is no longer actively maintained. Please refer to the v2 docs for the latest information.

​
Scroll Resetting

When navigating between pages, Inertia mimics default browser behavior by automatically resetting the scroll position of the document body (as well as any scroll regions you’ve defined) back to the top. In addition, Inertia keeps track of the scroll position of each page and automatically restores that scroll position as you navigate forward and back in history.

​
Scroll Preservation

Sometimes it’s desirable to prevent the default scroll resetting when making visits. You can disable this behavior by setting the preserveScroll option to false. 
import { router } from '@inertiajs/vue2'

router.visit(url, { preserveScroll: false })
If you’d like to only preserve the scroll position if the response includes validation errors, set the preserveScroll option to “errors”. 
import { router } from '@inertiajs/vue2'

router.visit(url, { preserveScroll: 'errors' })
You can also lazily evaluate the preserveScroll option based on the response by providing a callback. 
import { router } from '@inertiajs/vue2'

router.post('/users', data, {
    preserveScroll: (page) => page.props.someProp === 'value',
})
When using an Inertia link, you can preserve the scroll position using the preserveScroll prop. 
import { Link } from '@inertiajs/vue2'

<Link href="/" preserve-scroll>Home</Link>

​
Scroll Regions

If your app doesn’t use document body scrolling, but instead has scrollable elements (using the overflow CSS property), scroll resetting will not work. In these situations, you must tell Inertia which scrollable elements to manage by adding the scroll-region attribute to the element. 
<div class="overflow-y-auto" scroll-region>
    <!-- Your page content -->
</div>