如何记住资产净值的滚动位置(固定/溢出-y:滚动)

时间:2016-06-03 08:14:50

标签: javascript php jquery css

我有一个NAV 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。我该怎么做?感谢。

2 个答案:

答案 0 :(得分:0)

您需要在本地存储数据(使用local storage / cookies),然后重新滚动到该位置。

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

&#13;
&#13;
$(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));
  });
})
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

获取滚动位置:

使用element.scrollTop

var scrollPos = nav.scrollTop;

更改页面时存储信息:

如果您真的正在更改页面,则需要将此信息存储在会话变量或cookie中。为此,您需要在每次更改位置时更新cookie(或使用AJAX请求更改会话变量)。

你也可以&#34;假装&#34;改变页面,就像Gmail一样。为此,您需要使用javascript更新浏览器栏并使用AJAX更改页面内容。

加载滚动位置:

同样,您可以使用element.scrollTop,但请指定它:

nav.scrollTop = storedScrollPosition;