Fixing page jump in Rails websites using Turbo
This was a very annoying problem that had a straightforward fix but was hard to track down.
You have a Rails website using Hotwire/Turbo that is, after clicking a link, skipping to the top before navigating to the requested page. The steps needed to replicate are:
- Scroll to the bottom of the current page
- Click a link to visit something new
- Witness the current page jump to the top for a blip 😧
- Requested page renders
Additionally, it would goof up the previous page’s scroll position if you ever clicked to go back. Because the previous page has skipped to the top prior to changing, it didn’t reflect where the user was.
I was using Bootstrap 5, which defaults to setting
scroll-behavior: smooth. I found some folks wondering if the combination of Bootstrap 5 and Turbo was causing weirdness. I disabled smooth scrolling in Bootstrap, but that didn’t fix it.
I found similar issues being discussed that related to
data-turbo-track="reload"however, that didn’t apply to my site. I even found a lengthy discussion dealing with scroll position that is still open.
The setting is found under Speed > Optimization > Rocket Loader.
Hopefully, this fixes your problem!
Written by Matt Haliski
The First of His Name, Consumer of Tacos, Operator of Computers, Mower of Grass, Father of the Unsleeper, King of Bad Function Names, Feeder of AI Overlords.