navigation for one-page site with url

Question

I have a one-page site and links on them like <a href="#block1">link1</a> . Browser adress bar shows site.com/#block1

I want the browser gave a line like site.com/block1 and after click on link site.com/block1 browser will open scrolled page to needed block.

This jsfiddle as simple, but it isn't work http://jsfiddle.net/26LRA/2/

There should be no magic, no php, cms, sql and different plugins. Only pure javascript/jquery

Add: I give you this site http://www.ascensionlatorre.com as that I want, but I can not understand their code

Answer 1

You mean you want to just visibly change the url:

$("#name0 a").click(function(e) {
    e.preventDefault();
    var id = $(this).attr('href').substring(1);
    $('html,body').animate({scrollTop: $('#'+id).offset().top}, 'fast');
    window.history.pushState("", "", '/' + id);
});

Example

for the link to actually work you need mod_rewrite , make a .htaccess and add:

RewriteRule ^portfolio$ /index.php/#$1 [QSA,NE]

to read the URL

var path = document.location.pathname;
path = path.substring(path.lastIndexOf('/'), 1);
if(path){
    $('html,body').animate({scrollTop: $('#'+path).offset().top}, 'fast');
}

Answer 2

我认为执行此操作的正确方法是在.htaccess中使用mod_rewrite。