Reload bellow the fold in same place

The most annoying thing when you are working with animations or even with CSS is definitely when you are working on something that is below the fold, and with each refresh, you need to scroll again to see the changes.

This code snippet will help you with that. It will scroll to the same position as to where the page was when you clicked refresh.

Code is safe to be used even on production websites. In the case of user refresh, nothing will look broken from his side.

For the best performance, we recommend that you create a separate code block and target only the page you are working on.

This code snippet is also handy for the Scripts Organizer preview feature since every saves in Scripts Organizer will reload the preview.

Without Reload Script

With Reload Script

Reload Code

Place it as Condition > Header > JavaScript

document.addEventListener("DOMContentLoaded", function(event) { 
    var scrollpos = localStorage.getItem('scrollpos');
    if (scrollpos) window.scrollTo(0, scrollpos);
});

window.onbeforeunload = function(e) {
    localStorage.setItem('scrollpos', window.scrollY);
};