Return 页面滚动到顶部后的滚动位置

Question

我试图让侧边栏只在点击相关按钮时出现，在小型设备上，但我遇到了一些困难。

我找到了一种方法来切换它的 class 使其在点击时 dis/appear 并在完成后自动将页面滚动回顶部，这样侧边菜单的顶部将是无论他们当时正在查看页面的哪一部分，都会向查看者显示。但是，我发现很难将这些与使页面 return 在侧边菜单消失后到达访问者所在的滚动点的方法相结合。你能帮我解决这个问题吗？

HTML:

<div class="col-md-2" role="navigation">
    <ul class="nav" id="sidemenu">
      <li><a href="#">Lorem ipsum dolo</a></li>
      <li><a href="#">Lorem ipsum dolo</a></li>
      <li><a href="#">Lorem ipsum dolo</a></li>       
    </ul>
</div>

JS:

$('#sidebutton').click(function() {
$('#sidemenu').toggleClass("current") && $('html,body').scrollTop(0);
$('.nodisplay').toggleClass("hidden");
});

CSS（以防万一）：

 #sidemenu, .hidden {  display: none; }
 #sidemenu.current { display:block; }

Answer 1

当用户点击按钮显示侧边栏时获取滚动位置，您可以将其存储在 localStorage 上，然后当侧边栏关闭时您回滚到存储的位置。

这是一个如何获取它的例子，当你要显示侧边菜单时执行这个：

var currentScrollPosition = $('body')[0].scrollTop;
localStorage.setItem('myapp-current-top', currentScrollPosition);

然后当你想 return 滚动到那个位置时，你只需将该值传递给 scrollTop() 函数，如下所示：

$('body').scrollTop(localStorage.getItem('myapp-current-top'));

希望对你有所帮助

Answer 2

当菜单隐藏时，将当前滚动位置保存在某处（local/sessionStorage，变量，任何地方）并滚动到顶部。当菜单未隐藏时，滚动到您之前保存的位置：

var scrollTo;
var prevScrolPos;

$('#sidebutton').click(function () {

    if (!$('#sidemenu').hasClass("current")) {
        // if the menu is hidden, save the current scroll position and scroll to top
        prevScrolPos = $('body').scrollTop();
        scrollTo = 0;
    } else {
        // if the menu is not hidden, scroll to the saved position
        scrollTo = prevScrolPos;
    }

    $('#sidemenu').toggleClass("current") && $('html,body').scrollTop(scrollTo);
    $('.nodisplay').toggleClass("hidden");

});

演示：http://jsfiddle.net/o7btkgog/

Return 页面滚动到顶部后的滚动位置

Return to scroll position after the page has been scrolled to top

javascript

jquery

scroll

position