单页应用程序(SPA)中的命名锚
在SPA中，使用像Sammy.js这样的导航框架，如何在页内导航中使用名为锚的页面？
例如，我有一个类似于localhost/myapp/#/somerecord/1的路径，其中应用程序用id = 1加载滚筒。
然而，翻筋斗真的很复杂，而且很长。我想要能够跳到一个特定的部分使用命名锚。
假设像<article id=section-d> ... </article>一样定义了一个文章元素，而我只是链接到喜欢的<a href=#section-d>Section D</a>，它在技术上是有效的，但是URL读起来像localhost/myapp/#section-d，这破坏了导航堆栈。按下“后退”按钮可以让我回到localhost/myapp/#/somerecord/1，而不是跳回顶端。
首选的操作是要么跳回顶部，要么跳到上一页。对如何做到这一点有什么想法吗？
回答 2
Stack Overflow用户
发布于 2013-04-23 07:27:21
实际上，您必须将URL定义为正则表达式，并允许在其末尾添加一个可选的书签散列；如下所示：
get(/#\/somerecord\/(\d+)(#.+)?/, function() {
var args = this.params['splat'];
var recordId = args[0];
var articleId = args[1];
});这应与下列任何一条路线相匹配：
- #/翻筋斗d/1
- #/somerecord/1# (被视为没有物品id)
- #/somerecord/1#节-d (articleId =‘#节-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/
Stack Overflow用户
发布于 2013-04-21 09:25:05
我在使用sammy.js时也遇到了同样的问题。基本上，您必须为页面上的每个锚创建一个(不可见的)路由。请看我写的关于我找到的解决方案的帖子：http://papamufflon.blogspot.de/2013/04/durandal-scrollspy.html
https://stackoverflow.com/questions/15075265
复制相似问题
腾讯云开发者
