Mmenu

Question

我已经实现了 Mmenu，我想添加一个功能来向下滚动到当前选定的元素 - 一个 class 名称为“.current-page”的 li 元素。

我已添加

$("html, body").animate({ scrollTop: $(".current-page").offset().top }, 1500);

到 Mmenu 代码 - 参见 Fiddle。但是，它不起作用。页面没有滚动。

知道为什么它不起作用吗？

提前致谢。

Answer 1

这是我使用 scrollTop 动画的示例。它不能解决你的问题，但我希望它能帮助你开始。

$('button').click(function () {
  $('.demo').animate({
    scrollTop: $('.demo')[0].scrollHeight
  }, 1500)
})

div {
  width: 250px;
  height: 250px;
  overflow: auto  
}
#content {
    height: 800px;
    width: 2000px;
    background-color: coral
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="demo">
  <div id="content">Content</div>
</div>
<button>Scroll down</button>

Answer 2

我为 Mmenu 找到了一个未记录的 api 选项，所以我最终做了这样的事情：

var api = $('#menu').data('mmenu');
api.bind('opened', function() {
    if ($(".current-page").length) {
        var selected = $(".current-page");
        selected[0].scrollIntoView({block: "start", behavior: "smooth"});
    }
});

Mmenu - 滚动到元素不工作

Mmenu - scroll to element not working

jquery