A while back Kamruz Jaman wrote about how to stop experience editor reloading the page when you make changes to components.
Over the years I’ve added this improvement into a few Sites I’ve worked on in an upgrade-proof way and tweaked it a bit. It prevents the page scrolling back to the top when reloading when adding or editing components, changing datasources, rendering params or workflow.
This still seems to be a frustration even in the latest version of Sitecore and as adding this improvement in involves a bit of code (and understanding of how to inject scripts into Sitecore Experience Editor) I decided it would be nice to package this up into a proper Sitecore module.
Example of Experience Editor Issue
You can see an example of this below with a simple Bootstrap 5 Site. When a Card components properties are edited in experience editor it scrolls the editor half way up the page when saving.
Sloth Demo
When performing the same tasks in as in the previous video (editing component properties & adding datasources) you can see that Experience Editor takes you back to where you were after saving.
So here it is ‘Sitecore Sloth’. Named so, as Sloths are pretty stationary animals and that’s what this module does, stops Experience Editor moving around too much :-).
You can download the Sitecore package and install it from Github and I’m going to push it to NuGet soon too. The install instructions are in the readme here.
You can also see the code on Github here. It’s been created as an Foundation Module following Helix conventions.
Sitecore Sloth has been tested with most versions of Sitecore from 9.1 up to 9.3. Sitecore 10 update 2 seems to have resolved this issue, I’m not sure about other 10.x versions.
Please note it will only work on MVC based Sitecore sites and not Webforms ones as it hooks into the MVC rendering pipeline.
Thanks to Kamruz for sharing the original code and idea and hope it’s useful for others too.
