Question

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

我找到了一种方法来切换它的类，使其在点击时显示/显示，并在完成后自动滚动页面返回顶部，这样侧面菜单的顶部将显示给观看者，无论哪个部分他们当时正在浏览的页面。但是，我觉得很难将这些结合起来，以便在侧面菜单消失之后使页面返回到访问者所在的滚动点。你能帮我解决这个问题吗？

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);

然后，当您想要将滚动返回到该位置时，您只需将该值传递给scrollTop（）函数，如下所示：

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

我希望它可以帮到你。

Answer 2

当隐藏菜单时，将当前滚动位置保存到某处（local / sessionStorage，variable，where），并滚动到顶部。如果未隐藏菜单，请滚动至您之前保存的位置：

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/

页面滚动到顶部后返回滚动位置

2 个答案: