Html 单页应用程序（SPA）中的命名锚点

在SPA中，使用诸如Sammy.js之类的导航框架，如何在名为锚的页面中使用页面内导航

e、 g.假设我有一个类似于

localhost/myapp/#/somerecord/1

的路由，其中应用程序加载id=1的somerecord

然而，有些记录是非常复杂和漫长的。我希望能够使用一个命名的锚点跳转到某个部分

假设一个article元素的定义类似于

，它在技术上是有效的，但是URL读起来类似于

localhost/myapp/#section-d

，这会破坏导航堆栈。点击“后退”按钮，我将返回到

localhost/myapp/#/somerecord/1

，而不会跳回到顶部

---

首选的操作是跳回顶部或上一页。关于如何实现这一点有什么想法吗？

我在sammy.js中使用durandal时遇到了同样的问题。基本上，您必须为页面上想要的每个锚创建（不可见）路由。请参阅我关于我找到的解决方案的帖子：

实际上，您必须将URL定义为正则表达式，并在其末尾允许一个可选的书签哈希；比如：

get(/#\/somerecord\/(\d+)(#.+)?/, function() {
    var args = this.params['splat'];
    var recordId = args[0];
    var articleId = args[1];
});

var $article = $(articleId);
    $(document.body).animate({ scrollTop: $article.offset().top });
});

这应符合以下任一路线：

• #/somerecord/1
• #/somerecord/1#（视为没有物品id）
• #/somerecord/1#section-d（articleId='#section-d'）

然后，您应该能够使用articleId找到匹配的元素并手动滚动。e、 g.在上面的最后一条路线中，使用jQuery可以执行以下操作：

get(/#\/somerecord\/(\d+)(#.+)?/, function() {
    var args = this.params['splat'];
    var recordId = args[0];
    var articleId = args[1];
});

var $article = $(articleId);
    $(document.body).animate({ scrollTop: $article.offset().top });
});

如果您感兴趣，我刚刚写了一篇更全面的文章（使用Durandal）：

编辑 林克死了。此处提供的文章

这是的副本，但那篇文章的答案不好（即，没有sammy.js的纯Javascript的答案）