CODEWITHSUNDEEP
javascriptjquerycssscrollmmenu
mikethehud
mikethehud

Reputation: 43

jQuery mmenu makes page automatically jump to top

for a university project I am trying to implement a mobile menu to a responsive website. To do this I used the jQuery plugin mmenu.

Everything seems to work fine except for one thing: Whenever I open the menu it scrolls to the top of the page instead of staying where it was. I also realized that I can't scroll the page while the menu is open (as opposed to the example here: http://mmenu.frebsite.nl/mmenu/demo/onepage.html)

My code is structured as follows:

<body>
    <!-- Mobile Navigation -->
    <nav id="mobilenav">
        <div>
            <ul>
                ... 
            </ul>
        </div>
    </nav>
    <div id="wrapper">
        <header class="mm-fixed-top hidden-desktop">
            ...
            <a href="#mobilenav" class="pull-left"><i class="fa fa-bars"></i></a>
            ...
        </header>
        <div id="topbar">
            ...
        </div>
        <div id="content">
            ...
        </div>
    </div>
    <div id="tothetop" class="hidden-desktop">
        ...
    </div>
    <div id="bottom" class="visible-desktop">
        ...
    </div>
    <!-- Scripts -->
        ...
</body>

You can see the problem in action at http://www.mikehudson.de/BA/.

Thanks for your answers in advance.

-- Mike

Upvotes: 3

Views: 1693

Answers (2)

JCraine
JCraine

Reputation: 1424

If you do apply the 100% to the body/html, make sure you preventDefault() on the click event if your trigger happens to have a "#" in the href. This tripped me up.

Upvotes: 3

thorminator
thorminator

Reputation: 61

Are you using this Plugin along with Foundation 5. If so then you can change the html, body height from 100% to auto in the global.scss file.

eg...

FROM:

// Must be 100% for off canvas to work


    html, body { height: 100%; }

TO:

// Must be 100% for off canvas to work


     html, body { height: auto; }

Upvotes: 5

Related Questions