CODEWITHSUNDEEP
javascriptjquerysemantic-ui
Tench
Tench

Reputation: 525

scroll to menu in semantic ui

i'm using semantic-ui for the menu, which is fixed in the upper right corner, and it stays there even when the page is long, as shown here:

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>

The problem is the following: when the page is long (if you scroll down to the "end of stuff") in jsfiddle, clicking on the menu link in the upper right corner will NOT actually show the menu, but only empty space, because there are simply not enough items in the menu.

I would like to scroll the page up to the top whenever the user clicks on the menu link, I've tried to use $(window).scrollTop(), but to no avail.

Any hints on how to scroll up to the menu would be greatly appreciated.

Upvotes: 1

Views: 3202

Answers (1)

Rise Ledger
Rise Ledger

Reputation: 969

Like a quick and solution you can do something like this

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);
  }
});

Here is the updated JS Fiddle: http://jsfiddle.net/03pfvhzs/2/

Upvotes: 2

Related Questions