Reload bellow the fold in same place

Marko Krstić
12 Jan 2022

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);
};

Was this article helpful?

Tags

Categories

Never miss new post again

Subscribe and get list of new posts in your inbox

Click to Copy