Question

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

Answer 1

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

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

＆＃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;

Answer 2

获取滚动位置：

使用element.scrollTop。

var scrollPos = nav.scrollTop;

更改页面时存储信息：

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

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

加载滚动位置：

同样，您可以使用element.scrollTop，但请指定它：

nav.scrollTop = storedScrollPosition;

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

2 个答案: