Jump to content

How to return to the same scroll position when using browser's back button?

Go to solution Solved by Helen_Phan,

Recommended Posts

Hello, can you please help?
I would simply like to have my site do the following:

1. When you click the back button in a browser, it takes you back to where you were on the previous page. Currently, it takes you back to top of page, which is frustrating if you were 10 images down in a gallery or on mobile. I am okay with a load time... 🙂

Is this possible on Squarespace? Example can be found here:
https://www.nicholaskonert.com/art

Thank you for your help and support.

Link to comment
  • 3 weeks later...

I am having the same issue! 

I have many images with click through links, and I do not have them opening in a new window. However, when clicking the "back" button in my browser, it returns to the previous page but scrolled all the way to the bottom. Very annoying to find your place again.

Attached are images describing this, and here is the site: https://kristinspiewak.com/#/furniture/

Any solutions to this??

squarespace-issue.jpg

Link to comment
  • 4 months later...

Hey friends, 

Here's a snippet of code that I use to save the scroll position. I use it when a user has navigated away from a long index page and I want them to return to the same place.

Note, for an index, you must add it in the code injection for the INDEX, not the page section. 

<script type="text/javascript">
  function refreshPage () {
      var page_y = document.getElementsByTagName("body")[0].scrollTop;
      window.location.href = window.location.href.split('?')[0] + '?page_y=' + page_y;
  }
  window.onload = function () {
      setTimeout(refreshPage, 35000);
      if ( window.location.href.indexOf('page_y') != -1 ) {
          var match = window.location.href.split('?')[1].split("&")[0].split("=");
          document.getElementsByTagName("body")[0].scrollTop = match[1];
      }
  }
</script>

Let me know if this helps!

Link to comment
On 9/16/2020 at 11:50 PM, kylejcho said:

I'm confused what I'm supposed to do with this code. Where do I paste it? In the "Code Injection" section?

Add to Home > Settings > Advanced > Code Injection > Footer

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 1 month later...
  • 2 months later...
  • Solution

Try this code. It works for me.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function () {

    if (localStorage.getItem("my_app_name_here-quote-scroll") != null) {
        $(window).scrollTop(localStorage.getItem("my_app_name_here-quote-scroll"));
    }

    $(window).on("scroll", function() {
        localStorage.setItem("my_app_name_here-quote-scroll", $(window).scrollTop());
    });

  });
</script>

 

Link to comment

It is odd, but I have never really noticed where my site goes when I hit the browser back button when scrolled down the site. I tried this in a page with summary blocks, a  gallery page image I accessed from an index thumbnail and a blog entry, they all go right back to where I was at when I scrolled down.  I have done nothing to make that happen, but I like that it does. It will not do it when viewing my site as the owner ony as a visitor. 

my random views

Edited by derricksrandomviews
Link to comment
  • 3 months later...
On 12/25/2020 at 8:01 PM, Helen_Phan said:

Try this code. It works for me.


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function () {

    if (localStorage.getItem("my_app_name_here-quote-scroll") != null) {
        $(window).scrollTop(localStorage.getItem("my_app_name_here-quote-scroll"));
    }

    $(window).on("scroll", function() {
        localStorage.setItem("my_app_name_here-quote-scroll", $(window).scrollTop());
    });

  });
</script>

 

Helen, Where do I drop this code in Header, Footer or Order Conformation sections

Link to comment

My site has a lot of scrolling. The template Avenue returned you to where you were on the page. I switched to Brine template to have more control on the post. But I found out this annoying thing where back arrows bring you to the top of the page. I can imaging this will get old to the users experience. I am about to inject the code above but am uncertain as to which section. Also i am nervous that I will break my site. If something bad happens can I simply go in and remove it?

Link to comment
On 6/18/2020 at 11:08 AM, colin.simmons said:

Hey friends, 

Here's a snippet of code that I use to save the scroll position. I use it when a user has navigated away from a long index page and I want them to return to the same place.

Note, for an index, you must add it in the code injection for the INDEX, not the page section. 


<script type="text/javascript">
  function refreshPage () {
      var page_y = document.getElementsByTagName("body")[0].scrollTop;
      window.location.href = window.location.href.split('?')[0] + '?page_y=' + page_y;
  }
  window.onload = function () {
      setTimeout(refreshPage, 35000);
      if ( window.location.href.indexOf('page_y') != -1 ) {
          var match = window.location.href.split('?')[1].split("&")[0].split("=");
          document.getElementsByTagName("body")[0].scrollTop = match[1];
      }
  }
</script>

Let me know if this helps!

This one worked great. I land at the top of each post and don't loose the spot on scrolls. This was especially important on smartphones. One question; can Ajax be enabled with this script. I am afraid to try it.

Link to comment
  • 9 months later...
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<script type="text/javascript">
if (window.performance && window.performance.navigation.type === window.performance.navigation.TYPE_BACK_FORWARD) {
   if (localStorage.getItem("my_app_name_here-quote-scroll") != null) {
        $(window).scrollTop(localStorage.getItem("my_app_name_here-quote-scroll"));
    }
} else {
   $(window).scrollTop();
}

window.addEventListener('beforeunload', function (e) {
        if (window.performance && window.performance.navigation.type === window.performance.navigation.TYPE_BACK_FORWARD) {
        localStorage.setItem("my_app_name_here-quote-scroll", $(window).scrollTop());
        } 
 
});
</script>

Here how I solve that problem. All previous solutions doesnt works because it will be overriden when customer scroll next page.
You should paste code into head (anywhere between <head></head>)
 

Link to comment
  • 1 year later...

I am having a similar issue except it goes to the top of the page. The JS i had in the code injector stopped working after working for 4 + years. Does anyone now how to fix this. Here is the current code that isn't working:

<script type="text/javascript">
  function refreshPage () {
      var page_y = document.getElementsByTagName("body")[0].scrollTop;
      window.location.href = window.location.href.split('?')[0] + '?page_y=' + page_y;
  }
  window.onload = function () {
      setTimeout(refreshPage, 3600000);
      if ( window.location.href.indexOf('page_y') != -1 ) {
          var match = window.location.href.split('?')[1].split("&")[0].split("=");
          document.getElementsByTagName("body")[0].scrollTop = match[1];
      }
  }
</script>

Link to comment
  • 3 months later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.