title: How to use jquery.scrollTo with jquery(.load) method, loading external pages in the same div
body: <p>I am creating POC of the website, its a multi page website,
  There are three sections in the index page, and I am loading the external HTML Pages into specific div.
  for example:</p>
  
  <pre><code>&lt;div id="header"&gt;&lt;/div&gt;
  &lt;div id="content"&gt;&lt;/div&gt;    
  &lt;div id="footer"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>and the pages loading via jquery like this:</p>
  
  <pre><code>$("#header").load("./pages/header.html");
  $("#content").load("./pages/home.html");        
  $("#footer").load("./pages/footer.html");
  </code></pre>
  
  <p>On the Home page there are several sections with specific IDs like </p>
  
  <p>When I click on the page2 I need to load page2.html into $("content") div
  see below jquery code</p>
  
  <pre><code>$(document).on("click", "#home  nav a.page2", function(){               
              $("body").attr("id","page2");
              $("#content").load("pages/page2.html");
              return false;
  }); 
  </code></pre>
  
  <p>Header is same for all pages and when user click on the section 3 or section 4, links in the header its again load the home page and scrollto target section which is not working.</p>
  
  <p>How to solve this issue </p>
  
  <p>Please check the demo on : 
  <a href="http://kui.link/materialize/" rel="nofollow noreferrer">http://kui.link/materialize/</a></p>