I saw an answer for this earlier but the answer I got did not seem to work for me. I am a beginner in javascript so I would really appreciate if someone would explain what I am doing wrong.

My code for this is here:

<script type="text/javascript">
        $(document).ready(function()
        {
            if ( $.cookie("scroll") != null )
            {
                $(window).scrollTop( $.cookie("scroll") );
            }

            $(window).on("scroll", function()
            {
                $.cookie("scroll", $(window).scrollTop() );
            });

        });
    </script>

What I wanted to achieve is as was said in the title to store the scroll position of the user using cookies and when the page is refreshed the position is maintained. I don't need to use cookies if there is another way of doing it. Thank you in advance.

I saw an answer for this earlier but the answer I got did not seem to work for me. I am a beginner in javascript so I would really appreciate if someone would explain what I am doing wrong.

My code for this is here:

<script type="text/javascript">
        $(document).ready(function()
        {
            if ( $.cookie("scroll") != null )
            {
                $(window).scrollTop( $.cookie("scroll") );
            }

            $(window).on("scroll", function()
            {
                $.cookie("scroll", $(window).scrollTop() );
            });

        });
    </script>

What I wanted to achieve is as was said in the title to store the scroll position of the user using cookies and when the page is refreshed the position is maintained. I don't need to use cookies if there is another way of doing it. Thank you in advance.

• javascript
• jquery
• cookies

• Please provide what you mean by "did not seem to work". If the place you got the answer from is Stack Overflow, provide a link to that answer for context, and so that someone doesn't mark this as a duplicate. Finally be specific about what you don't understand. See How to Ask for more tips. – Heretic Monkey Commented Aug 3, 2016 at 17:49

4 Answers 4

If you did include jquery cookie then everything should work as expected:

//soln 1
$(window).on("scroll", function() {
  $.cookie("tempScrollTop", $(window).scrollTop());
});
$(function() {
  if ($.cookie("tempScrollTop")) {
    $(window).scrollTop($.cookie("tempScrollTop"));
    alert("loaded postion : " + $.cookie("tempScrollTop"));
  }
});

WORKING AT : http://output.jsbin./nizejuw

This is an alternate solution using localstorage spec of HTML5.

//loading soln

$(function() {
  if (localStorage.tempScrollTop) {
    $(window).scrollTop(localStorage.tempScrollTop);
    alert("loaded postion : " + localStorage.tempScrollTop);
  }
});


//saving soln 1
$(window).on("scroll", function() {
  localStorage.setItem("tempScrollTop", $(window).scrollTop());
});

//saving soln 2
window.onbeforeunload = function() {
  var tempScrollTop = $(window).scrollTop();
  localStorage.setItem("tempScrollTop", tempScrollTop);
  return "Saved scroll to localstorage!!";
};

You might be missing including an external js library to use that $.cookie code. I can suggest you try using HTML5 Web Storages

 $(document).ready(function() {
    if (localStorage.getItem("scroll") != null) {
      $(window).scrollTop(localStorage.getItem("scroll"));
    }

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

});

FIDDLE

document.location.reload(true) stores the position and is the shortest option

You can use Cookie js

$(document).ready(function () {

            $(".sidebar-nav").scroll(function () {
                // cookie'ye kaydedilir
                Cookies.set("AT_SidebarNav_ScrollTop", $(".sidebar-nav").scrollTop());
            });

            if (Cookies.get("AT_SidebarNav_ScrollTop")) {
                $(".sidebar-nav").scrollTop(Cookies.get("AT_SidebarNav_ScrollTop"));
                console.log(".sidebar-nav scrollTop:" + Cookies.get("AT_SidebarNav_ScrollTop"));
            }

        });

js cookie: https://github./js-cookie/js-cookie

You can use timeout to prevent block ui:

var timeout;
$(window).scroll(function (event) {
    var scroll_positon = $(window).scrollTop();

    clearTimeout(timeout); //clear it to avoid crazy writing

    //and create a new interval to write it later
    timeout = setTimeout(function () {
        Cookies.set('prev_scroll_position', scroll_positon);
    }, 250);
});