CODEWITHSUNDEEP
htmlcsssafariwebflowscroll-position
getty
getty

Reputation: 1

HTLM/CSS solution for WEBFLOW - Keep scroll position in Safari, after site reloads upon clicking the back button

I am not a professional coder/programmer, therefore I am currently stuck with a problem, while working on my website in Webflow.

I have a Blog-type website, the main page is a feed, where my team and I upload our blogposts, it's a long list, updated many times throughout the day. What I wanted to begin with, is a solution, where the website reloads after one presses the back-button in the browser, after having read an article and wanting to return to the feed - I have now run into some issues concerning the scroll position in certain browsers.

My current solution, which I included in the section (Head Code, ) is this:

<script>
(function () {
    window.onpageshow = function(event) {
        if (event.persisted) {
            window.location.reload();
        }
    };
})();
  </script>

The code above works perfectly fine in reloading the website when the back-button has been pressed.

The Problem: What, sadly, does not work, especially in Safari browsers, on iPhone, Mac, etc. is the Maintaining of the scroll position. Whenever one returns to the feed, after the website was reloaded, the scroll position returns to the beginning of the page.

What I would like to have is a simple solution to address this problem, a piece of code that I can implement into the Custom Code section in Webflow, that retains the scroll position, even in Safari.

I'd be very happy if someone in this community has a solution.

Thanks, Getty

Upvotes: 0

Views: 380

Answers (1)

learner
learner

Reputation: 606

. Here is a piece of code that you can implement into the Custom Code section in Webflow to retain the scroll position, even in Safari:

window.onpageshow = function(event) {
  if (event.persisted) {
    window.location.reload();
    var scrollY = window.scrollY;
    window.scrollTo(0, scrollY);
  }
};

This code will first check to see if the page is being loaded after the back button has been pressed. If it is, the code will then reload the page and scroll to the previous scroll position.

Upvotes: 0

Related Questions