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

Question

在SPA中，如果使用像Sammy.js这样的导航框架，我如何使用页面内命名锚点进行页面内导航？

例如，假设我有一个路由，如localhost/myapp/#/somerecord/1，应用程序会加载id = 1的somerecord。

但是somerecord非常复杂和长。我希望能够使用命名锚点跳转到某个特定部分。

例如，定义了一个文章元素，如<article id=section-d> ... </article>，我只需链接到<a href=#section-d>Section D</a>，它在技术上可以工作，但URL看起来像localhost/myapp/#section-d，这会破坏导航堆栈。点击后退按钮，我会回到localhost/myapp/#/somerecord/1，而没有跳回到顶部。

首选操作是要么跳回到顶部，要么跳转到上一页。有什么想法如何实现这一点？

- Doguhan Uluca

---

这是 https://dev59.com/TmLVa4cB1Zd3GeqPxpa9 的副本，但那个只有糟糕的答案（即仅针对纯Javascript而不是sammy.js的答案）。 - Moshe Katz

这是一个与http://stackoverflow.com/questions/9351231/scroll-to-anchor-link-in-a-sammy-js-project重复的内容。 - Moshe Katz

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/

- gerrod

Answer 2

我在使用durandal和sammy.js时遇到了同样的问题。基本上，你必须为页面上想要的每个锚点创建一个（不可见的）路由。请参阅我发现的解决方案的帖子：http://papamufflon.blogspot.de/2013/04/durandal-scrollspy.html

- Papa Mufflon