Question

在SPA中，使用Sammy.js等导航框架，如何在页面命名锚点中使用页面导航？

e.g。假设我有一个类似localhost/myapp/#/somerecord/1的路由，其中应用程序加载 somerecord 且id = 1。

然而 somerecord 真的很复杂而且很长。我希望能够使用命名锚跳转到某个部分。

假设文章元素定义为<article id=section-d> ... </article>，我只是链接到<a href=#section-d>Section D</a>它在技术上有用，但URL读起来像localhost/myapp/#section-d，这打破了导航堆栈。点击“返回”按钮会将我带回localhost/myapp/#/somerecord/1和，而不会跳回到顶部。

首选操作是跳回到顶部或上一页。关于如何实现这一目标的任何想法？

Answer 1

实际上，您必须将URL定义为正则表达式，并在其末尾允许可选的书签哈希;类似的东西：

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

这应符合以下任何路线：

＃/ somerecord / 1
＃/ somerecord / 1＃（视为没有文章ID）
＃/ somerecord / 1＃section-d（articleId ='＃section-d'）

然后，您应该能够使用articleId查找匹配元素并手动滚动。例如在上面的最后一个路线中，使用jQuery可以执行以下操作：

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

如果您有兴趣，我刚刚写了一篇关于此的更全面的文章（使用Durandal）：http://quickduck.com/blog/2013/04/23/anchor-navigation-durandal/

修改链接已经死了。这篇文章http://decompile.it/blog/2013/04/23/anchor-navigation-durandal/

Answer 2

我使用durandal和sammy.js有同样的问题。基本上，您必须为页面上所需的每个锚创建一条（不可见）路线。请参阅我发现的有关我找到的解决方案的帖子：http://papamufflon.blogspot.de/2013/04/durandal-scrollspy.html

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

2 个答案: