jquery - メニューをクリックしたときにZurb Foundationのトップバーのスクロールページを停止する

Question

グリッドに含まれる zurb を含む固定のトップバー メニューがあります。メニューの上 (スクロール前) には追加のメニューがあり、画面外にスクロールされ、zurb のトップバーが固定されます。正解です。

ただし、メニュー アイコンをクリックすると、ページ スクロールがページの上部に移動し、最初のメニューが再び表示されます。これは、メニューを再び折りたたむまではそれほど問題ではありません。これにより、レイアウトが台無しになることが明らかになります。

JS ファイルで scolltop : false のスクロールを無効にし、data-options を使用して html でインライン化しようとしましたが、何もしないようです!

任意のガイダンスをいただければ幸いです。

コード：

<div class="row">
<div class="contain-to-grid sticky">

<nav class="top-bar">
  <ul class="title-area">

<!-- Title Area -->

   <li class="name">
    <h1><a href="#"><img src="img/parts/clouds.png" alt="Scan and Share Photo Scanning"></a>    </h1>

    <div id="secondary-logo"><img src="img/parts/scan-share.png" width="267" height="79" alt="Scan old Photos"> </div>
  </li>

<!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->

  <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>

</ul>

<section class="top-bar-section">

<!-- Left Nav Section -->

<ul class="left"> <li class="active"><a href="#">HOME</a></li>
  <li ><a href="#">HOW IT WORKS</a></li>
  <li ><a href="#">WHY USE US</a></li>
  <li><a href="#">SERVICES</a></li>
  <li ><a href="#">FAQ</a></li>
  <li ><a href="#">BLOG</a></li>
  <li ><a href="#">CONTACT</a></li>
</ul>

<!-- Right Nav Section -->

</section>
</nav>
</div>
</div>

開発サイトへのリンクはhttp://scanshare.webdevspace.co.ukです。

ドキュメントはこちら: http://foundation.zurb.com/docs/components/top-bar.html