Mmenu - 滚动到元素不起作用答案

【问题标题】：Mmenu - scroll to element not workingMmenu - 滚动到元素不起作用
【发布时间】：2015-11-26 13:33:20
【问题描述】：

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

我已经添加了

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

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

任何想法为什么它不起作用？

提前致谢。

【问题讨论】：

我不确定你在期待什么。菜单默认关闭
是的，你是对的。只有在菜单打开时才会触发它。我找到了这个例子：jsfiddle.net/vanduzled/p9ynx8wc，但它会滚动到内容区域中的锚点。如何使其与菜单项一起使用？我在 Mmenu 的 api 上找到了信息：mmenu.frebsite.nl/documentation/api.html，但我不确定应该怎么做。

标签： jquery mmenu

【解决方案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>

【讨论】：

【解决方案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"});
    }
});

【讨论】：