滚动菜单语义UI
问题描述:
我使用语义的用户界面的菜单,这是固定在右上角,并在那里停留,即使页长,如下所示:滚动菜单语义UI
http://jsfiddle.net/psychomachine/03pfvhzs/1/
<div class="ui top attached demo menu">
<a class="header item">
Blah
</a>
<a class="right item tS">
<i class="sidebar icon"></i>
Menu
</a>
</div>
<div class="ui bottom attached segment pushable">
<div class="ui inverted labeled icon right inline vertical sidebar menu">
<a class="item">
<i class="home icon"></i>Home
</a>
<a class="item">
<i class="block layout icon"></i>
Topics
</a>
<a class="item">
<i class="smile icon"></i>
Friends
</a>
<a class="item">
<i class="calendar icon"></i>
History
</a>
</div>
<div class="pusher">
<div class="ui main text container">
<p>stuff</p>
etc. etc. etc.
<p>end of stuff</p>
</div>
</div>
的问题是:当页面长(如果你向下滚动到“的东西到底”)中的jsfiddle,点击右上角的菜单链接,实际上不会显示菜单,但只有空的空间,因为菜单中没有足够的项目。我想尝试使用$(window).scrollTop(),但无济于事。每当用户点击菜单链接,我都想将页面滚动到顶部。
任何提示如何滚动到菜单将不胜感激。
答
就像一个快速和解决方案,你可以做这样的事情
jQuery('.menu-toggle').on('click', function() {
$(this).toggleClass('is-active');
if($(this).hasClass('is-active')) {
jQuery('.bottom.segment').animate({
scrollTop: $(".sidebar.menu").offset().top
}, 600);
}
});
这里是更新JS小提琴:http://jsfiddle.net/03pfvhzs/2/
感谢,上升。这对我来说很完美。 – Tench