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

Question

我有一个资产净值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; 指定。

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

此NAV在我的网站上有一个主题列表（链接）。

我想让它在刷新页面或点击页面中的链接后记住NAV的垂直滚动位置。 我可以使用jquery。 我该怎么做？ 谢谢。

Answer 1

您需要在本地存储数据（使用本地存储 / cookie），然后重新滚动到该位置。

一些示例代码（根据您的使用进行自定义，这在StackOverflow中不起作用，因为对代码段禁用了本地存储）：

 $(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

获取滚动位置：

使用element.scrollTop 。

var scrollPos = nav.scrollTop;

更改页面时存储信息：

如果您确实在更改页面，则需要将此信息存储在会话变量或cookie中。 为此，您需要在每次更改位置时更新cookie（或使用AJAX请求更改会话变量）。

您也可以“假装”更改页面，就像Gmail一样。 为此，您需要使用javascript更新浏览器栏并使用AJAX更改页面内容。

加载滚动位置：

同样，您可以使用element.scrollTop ，但是分配它：

nav.scrollTop = storedScrollPosition;