jquery - How can I overlay a html page on an one page design? -

i coding 1 page design - 1 page content on homepage - have different links different external content pages, single.html. searching how can overlay single page on index.html, smooth navigation continue work , stand @ last position user was, example portfolio.

on internet read can load content jquery’s function load, seems not work me.

the code looks following:

$("#buttoncontact").click(function(e){     event.preventdefault();     $.ajax({url:"contact.html",success:function(result){          $("body").html(result);        }});  }); 

perhaps snippet of code doesn’t work me. explanation of code is, when user clicking on button id of buttoncontact, contact.html should loaded overlay on homepage. should markup single page - single.html same index, head stuff etc or should remove snippets of code out of page?

on www.dangblast.com see working example of means. click on thumbnail , content overlay whole homepage.

simple html. might put on multiple pages, put on single page. simple that.

so if have menubar links different pages:

<a href='home'>home</a> <a href="contact">contact</a>... 

... use page anchors instead, like:

<a href="#home">home</a> <a href="#contact">contact</a>... 

(notice difference hash tags (#) in href attribute.)

on each section of page, simple add id attribute headers or sectioning elements:

<h2 id="home">hello, world!</h2> <p>lorem ipsum dolor sit amet...</p>  <h2 id="contact">give call</h2> <p>lorem ipsum dolor sit amet...</p> 

or

<section id="home">     <h1>hello, world!</h1>     <p>lorem ipsum dolor sit amet...</p> </section>  <section id="contact">     <h1>give call</h1>     <p>lorem ipsum dolor sit amet...</p> </section> 

do google search "single page design" , you'll find lots of great implementation tips.