CODEWITHSUNDEEP
javascriptjquerycookies
Ívar Óli
Ívar Óli

Reputation: 33

Store and recover scroll position using cookies in javascript

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.

Upvotes: 3

Views: 3780

Answers (4)

ishakkulekci
ishakkulekci

Reputation: 871

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.com/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);
});

Upvotes: 0

Iceman
Iceman

Reputation: 6145

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.com/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!!";
};

Upvotes: 3

Batu.Khan
Batu.Khan

Reputation: 3065

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

Upvotes: 2

Mike B
Mike B

Reputation: 2776

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

Upvotes: 1

Related Questions