Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.
I'm using Breeze-React for Laravel 11, and I want the scroll position to remain unchanged when I click a button. According to the Inertia doc, this seems easy but it doesn't work for me.
I don't want to create a new Hook given this functionality should already exist. When I click the button the scrollbar always reset to the top. There is a video on Laracast but it's for the <Link> tag. Thanks
My button:
<PrimaryButton disabled={processing} onClick={showb}>Enable </PrimaryButton>
showb()
const showb = (e) => {
e.preventDefault();
get(route('reg.getreg'), {
preserveScroll: false, // tried false and true
onSuccess: () => {
// OK
},
});
}
You're using router.get() wrong. options is the third paramater, after url and data. The correct usage in your case:
router.get(route('reg.getreg'), {}, {
preserveScroll: true,
});
// Or using router.visit():
router.visit(route('reg.getreg'), {
preserveScroll: true,
});
@JussiMannisto Thanks for your help, I tried your code. Same problem.
Note that the original code that I posted from Breeze works fine get(route('reg.getreg') .. the only problem is that preserveScroll: true, doesn't work and the page keeps on scrolling to the top.
@alex32 My examples definitely work and preserve the scroll state.
the only problem is that preserveScroll: true, doesn't work and the page keeps on scrolling to the top.
That's because you're not setting the preserveScroll option. You're setting preserveScroll in the data object.
@JussiMannisto yes, router.get() has 3 args , but get() has only 2, and it works.
In your form what happen if you use only get() ? I bet preserveScroll still works. That's because the problem with page scroll is somewhere else.
@alex32 Which get function are you using? Is it the one from the useForm hook? Show the whole component.
Does the reg.getreg route return an Inertia response?
Yes both. I'm using useForm hook (below), and I get an Inertia response from reg.getreg.
The code is from Breeze-React and it works, it's just preserveScroll that doesn't work.
import PrimaryButton from '@/Components/PrimaryButton';
import TextInput from '@/Components/TextInput';
import { useForm } from '@inertiajs/react';
import { ToastContainer, toast } from 'react-toastify';
export default function QueryForm({ className = '' }) {
const {
data,
setData,
errors,
put,
get,
reset,
processing,
recentlySuccessful,
} = useForm({
current_val: '',
valqy: '',
qy_confirmation: '',
});
const update = (e) => {
e.preventDefault();
put(route('reg.update'), {
preserveScroll: true,
onSuccess: () => reset(),
onError: (errors) => {
if (errors.password) {
// err msg
}
},
});
};
const showb = (e) => {
e.preventDefault();
get(route('reg.getreg'), {
preserveScroll: true,
onSuccess: () => {
toast.success("Thank you");
},
onError: (errors) => {
// error msg
},
});
}
return (
<section className={className}>
<header>
<ToastContainer />
<h2 className="text-lg font-medium text-gray-900">
Enable Query
</h2>
</header>
<form onSubmit={update} className="mt-6 space-y-6">
<div>
<TextInput
id="valqy"
value={data.valqy}
onChange={(e) => setData('valqy', e.target.value)}
type="text"
className="mt-1 block w-full"
/>
</div>
<div className="flex items-center gap-4">
<PrimaryButton disabled={processing} onClick={showb}>Enable </PrimaryButton>
</div>
</form>
</section>
);
}
Could it be that it isn't the body that's scrolling? If so you need to set a scroll region on the correct element. It's in the docs
Please or to participate in this conversation.