带有url的单页网站导航

navigation for one-page site with url

本文关键字：网站导航 单页 url 带有      更新时间：2023-09-26

我有一个一页的网站，上面有类似<a href="#block1">link1</a>的链接。浏览器地址栏显示site.com/#block1

我希望浏览器给出一行类似于site.com/block1的内容，点击链接后，浏览器将打开滚动页面，找到所需的块。

这个jsfiddle很简单，但它不起作用http://jsfiddle.net/26LRA/2/

不应该有魔术，没有php，cms，sql和不同的插件。仅限纯javascript/jquery

添加：我给你这个网站http://www.ascensionlatorre.com正如我所希望的，但我无法理解他们的代码

你的意思是你只想明显地更改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);
});

示例

要使链接真正工作，您需要mod_rewrite，制作一个.htaccess并添加：

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

读取URL

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

我认为正确的方法是在.htaccess.

中使用mod_rewrite
相关文章：