title: Uncaught TypeError: Cannot read property 'scrolltop' of undefined - Zurb Foundation and Jquery Mobile
body: <p>I have an Application build using Jquery Mobile and Zurb Foundation CSS. I have a common Menu in the header in master page and cloned copy in other pages.  I have used responsive Menu using Foundation's Topbar.</p>
  
  <pre><code>&lt;div data-role="header" id="header-master" &gt;
  
  &lt;div class="row" &gt;
  
      &lt;div class="small-3 medium-2 large-2 columns &gt;
  
      &lt;/div&gt;
  
      &lt;div class="small-6 medium-2 large-2 columns " &gt;
  
      &lt;/div&gt;
  
      &lt;div class="small-12 medium-8 large-8 columns "&gt;
          &lt;nav class="top-bar" data-topbar data-no-turbolink role="navigation" id="home-context-menu"&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/nav&gt;
      &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>The cloned menu is ,</p>
  
  <pre><code>&lt;div id="header-child"&gt;
  
   &lt;/div&gt;
  </code></pre>
  
  <p>When I tap the menu, it expands and responds for click/tap action. Doing the same again gives an error stating Uncaught TypeError: Cannot read property 'scrolltop' of undefined. The console shows error in <strong>Foundation.min.js</strong></p>
  
  <p>I am cloning the menu in </p>
  
  <pre><code>$(document).on("pagecreate", "#page-next", function ()
  
       {
           $("#header-master").clone().appendTo("#header-child");
      }
      return false;
  
   });
  </code></pre>
  
  <p>I also tried cloning the header in <strong>pagebeforecreate</strong> event.</p>