Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by James Rush
James Rush
Courses Plus Student 256 Points

Anyone know how to restore users scroll position on a specific page after visiting other pages?

Hello, I am trying to restore a user's scroll position on long articles when they return to each specific article page, there will be about 10 long pages. When I mean to return to I mean even if that is a week from now they get taken to their last scroll position for each specific page.

The code below is all I have so far it brings me back to where I was on a reload but as soon as I go to another page and using a different link to return to the long article page it's all lost and takes me to the top again.

Any help would be great, thank you.

if(typeof(Storage) !== "undefined") {

        var storedResult = localStorage.getItem("location");
        var storedURL = localStorage.getItem("url");

         if (storedURL !== 'undefined' && storedResult !== null) {


            if (storedResult !== 'undefined' && storedResult !== null) {

                $(window).scrollTop(storedResult);
            }
         }

        $(window).scroll(function () { 
          var scrolledDown = window.scrollY;
            var currentUrl = window.location.href;
            localStorage.setItem("location", scrolledDown);
            localStorage.setItem("url", currentUrl);
        });

    } else {
        // No Web Storage Support.
    }

2 Answers

Tsenko Aleksiev
Tsenko Aleksiev
3,819 Points
Tsenko Aleksiev
Tsenko Aleksiev
3,819 Points

var scrollPos = window.scrollY || window.scollTop || document.getElementsByTagName("html")[0].scrollTop;

I think this will return the current scroll position and you may use it to set the scroll on reload. Have to test it but I'm writing from my phone. Tonight I will give it a try, if you manage to do it please give me a feedback, I would love to see it working :)

James Rush
James Rush
Courses Plus Student 256 Points

That doesn't seem to work, it only works on a reload.

It is from within a .php file, I don't think that makes any difference but I thought I should mention it -- mostly since the header is global and included by include_once. I also have the packages for vlucas, composer and firebase installed if that helps to find a way to make it work.

I have founds lots of code and help through the internet but it is all only to function for reloading a page there doesn't seem to be any working code anywhere to save a scroll position specific to a page for a user returning after visiting other pages and sites. Perhaps creating a cookie would work and I tried it but I am not very skilled with doing that so I am probably the reason that wouldn't work.

Tsenko Aleksiev
Tsenko Aleksiev
3,819 Points

If the user is on another page then returnes to yours isn't he reloading the page?

James Rush
James Rush
Courses Plus Student 256 Points

It seems not Tsenko since reloading classifies by basic web logic as loading the same page you are currently on. If you go elsewhere and then come back you're returning.

Seth Kroger
Seth Kroger
56,415 Points
Seth Kroger
Seth Kroger
56,415 Points

Local storage stores values as strings. I believe you'll need to use parseInt() on storedLocation to turn in into a number to pass to scrollTo().

James Rush
James Rush
Courses Plus Student 256 Points

Not exactly sure what you mean here Seth, do you think you could add it to the code if that is what you mean. Thanks.

Seth Kroger
Seth Kroger
56,415 Points

Where you set the scroll when you reenter the page:

         if (storedResult !== 'undefined' && storedResult !== null) {
              let scrollPosition = parseInt(storedResult);
              $(window).scrollTop(scrollPosition);
           }
         }