带有 url 的单页网站导航答案

【问题标题】：navigation for one-page site with url带有 url 的单页网站导航
【发布时间】：2012-09-06 08:29:27
【问题描述】：

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

我希望浏览器给出像 site.com/block1 这样的行，点击链接后 site.com/block1 浏览器将打开滚动页面到所需的块。

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

应该没有魔法，没有php、cms、sql和不同的插件。只有纯javascript/jquery

添加：我想给你这个网站http://www.ascensionlatorre.com，但我看不懂他们的代码

【问题讨论】：

您是否尝试过使用 history.js，因为您的参考网站正在使用它。 HTML5 历史 API 目前不能很好地跨浏览器运行。

标签： javascript jquery navigation hyperlink

【解决方案1】：

你的意思是你只想明显地改变网址：

$("#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

你需要mod_rewrite的链接才能实际工作，创建一个.htaccess并添加：

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

读取网址

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

【讨论】：

我希望链接能够正常工作，但是当您单击链接 site.com/block1 时，浏览器会出现 404 错误。我编辑了顶帖
这一切都很好，但如果你发送到浏览器链接 site.com/block1 它会给你一个 404 错误
好的，我需要添加什么规则，如果我的块名称“投资组合”没有数字，我无法理解“（。*）”这个需要与否
RewriteRule ^portfolio$ /index.html#portfolio [QSA,NE]
基本上你可以为每个字做RewriteRule ^(.*)$ /index.html#$1 [QSA,NE]

【解决方案2】：

我认为正确的方法是在您的 .htaccess 中使用 mod_rewrite。

【讨论】：