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的“结尾处”），单击右上角的菜单链接将不会显示菜单，而只是空空间，因为菜单中没有足够的项目。

每当用户点击菜单链接时，我想将页面滚动到顶部，我尝试使用$（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小提琴：http://jsfiddle.net/03pfvhzs/2/

滚动到语义ui中的菜单

1 个答案: