How to Remember Scroll Position of a NAV (fixed/overflow-y:scroll)

Question

I have a NAV position: fixed; top:115px; width:210px; margin-bottom: 0px; bottom: 0px; overflow: hidden; overflow-y:scroll; specifies.

<nav itemscope="" itemtype="http://schema.org/SiteNavigationElement" class="content-left">

This NAV has a list of topics(link) in my website.

I want it remember the vertical scroll position of NAV after refreshing page or clicking a link in the page. I can use jquery. How can i do it? Thanks.

score 0 · Accepted Answer · answered Jun 03 '16 at 08:33

0

You will need to store the data locally (Using local storage/cookies) and then re-scroll to that location.

Some example code (customise to your use, this wont work inside StackOverflow as local storage is disabled for snippets):

$(document).ready(function(){
  
  // Load any previous scroll position
  var previousScroll = localStorage.getItem('scrollPos');
  if(previousScroll !== null){
    $(window).scrollTop(previousScroll)
  }
  
  // Save scroll position when a user stops scrolling
  $(window).scroll(function() {
    clearTimeout($.data(this, 'scrollTimer'));
    $.data(this, 'scrollTimer', setTimeout(function() {
        localStorage.setItem('scrollPos', $(window).scrollTop());
    }, 250));
  });
})

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

answered Jun 03 '16 at 08:33

DBS

9,110
4
35
53

i can't do well on JS so i am looking for a full solution instead of solution methods. – Sezer Iltekin Jun 03 '16 at 08:43
@sezeriltekin While my answer is just a sketch, this *is* a full answer. DBS provided you with complete code and a working example. I don't know what more you could possibly expect. – Kittsil Jun 03 '16 at 08:46
1

@sezeriltekin You want the whole solution written for you? I've written pretty much everything you should need, it just needs a little adaption. This site isn't a "request this code" forum, you have to put in at least a little effort yourself. – DBS Jun 03 '16 at 08:46
Kittsil and @DBS ok guys. Please put up with me. – Sezer Iltekin Jun 03 '16 at 09:02
@DBS your code works for main window thanks but how can i make it work in my `NAV`? I changed all `$(window)` to `$(.content-left)` but nothing happened. – Sezer Iltekin Jun 03 '16 at 10:48
@DBS i wrote it as `$(".content-left")` and its okay. Thanks. I am so bad in JS. – Sezer Iltekin Jun 03 '16 at 10:59

score 0 · Answer 2 · edited May 23 '17 at 12:15

Obtaining the scroll position:

Use element.scrollTop.

var scrollPos = nav.scrollTop;

Storing information when changing the page:

If you are really changing the page, then you need to store this information in a session variable or cookie. To do this, you'll need to update the cookie every time the position is changed (or change the session variable with an AJAX request).

You can also "pretend" to change the page, like Gmail does. To do this, you'll need to update the browser bar with javascript and change the page's contents using AJAX.

Loading the scroll position:

Again, you can use element.scrollTop, but assign it:

nav.scrollTop = storedScrollPosition;

i can't do well on JS so i am looking for a full solution instead of solution methods. — Sezer Iltekin, Jun 03 '16 at 08:43

How to Remember Scroll Position of a NAV (fixed/overflow-y:scroll)

2 Answers2