Named Anchor in a Single Page Application (SPA)

Question

In SPA, using a navigation framework like Sammy.js, how can I use a page called anchors to navigate pages?

eg. Let's say I have a route like localhost/myapp/#/somerecord/1 , where the application loads somerecord with id = 1.

However, somerecord is really complex and long. I want to be able to jump to a specific section using a named anchor.

Let's say an article element is defined as <article id=section-d> ... </article> , and I just refer to <a href=#section-d>Section D</a> , how it works technically, but the URL The address reads as localhost/myapp/#section-d , this breaks the navigation stack. Pressing the back button takes me back to localhost/myapp/#/somerecord/1 and does not jump back.

The preferred action would be to either return to the top or previous page. Any ideas on how to do this?

Answer 1

Effectively, you should define your URL as a regular expression and allow an additional bookmark hash at the end of it; sort of:

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

This must match any of the following routes:

• # / somerecord / 1
• # / somerecord / 1 # (considered as there is no article identifier)
• # / somerecord / 1 # section-d (articleId = '# section-d')

Then you can use articleId to find the corresponding item and scroll manually. for example in the last route above using jQuery you can do something like:

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

I just wrote a more detailed article about this (using Durandal) if you are interested: http://quickduck.com/blog/2013/04/23/anchor-navigation-durandal/

Edit Link is dead. The article is available here http://decompile.it/blog/2013/04/23/anchor-navigation-durandal/

Answer 2

I had the same problem using durandal with sammy.js. Basically, you need to create a (invisible) route for each anchor you want on your page. Look at the message from me about the solution found: http://papamufflon.blogspot.de/2013/04/durandal-scrollspy.html