如何记住资产净值的滚动位置（固定/溢出-y：滚动）

Question

I have a NAV position: fixed; top:115px; width:210px; margin-bottom: 0px; bottom: 0px; overflow: hidden; overflow-y:scroll; 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.

Answer 1

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> 

Answer 2

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;