滚动到语义菜单 ui

Question

我用的是semantic-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页面较长时（如果向下滚动到"end of stuff"），点击右上角的菜单link实际上不会显示菜单，但只有空 space，因为菜单中的项目根本不够。

我想在用户单击菜单时将页面向上滚动到顶部 link，我尝试使用 $(window).scrollTop()，但是没有用。

如能提供有关如何向上滚动到菜单的任何提示，我们将不胜感激。

Answer 1

想要一个快速的解决方案，你可以这样做

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 Fiddle：http://jsfiddle.net/03pfvhzs/2/

滚动到语义菜单 ui

scroll to menu in semantic ui

javascript

jquery

semantic-ui