Using '#' in URLs in an Ember app

Design
1

A # char in a URL is generally used to refer to a specific section within a web page. It can be a paragraph or tab, or any kind of “section”.

For instance /some/page#section-2 would be section 2 of page /some/page. But in single page applications, the interpretation of a # char in the URL depends on the implementation. For instance, in Gmail it is used for “folders” (actually “labels”):

  • https://mail.google.com/mail/u/0/#inbox is the “inbox” folder,
  • https://mail.google.com/mail/u/0/#sent corresponds to sent messages, etc.

I’m trying to keep the standard web web logic in an Ember app. I have elements having ids like m1, m2, etc. in my page. If I have links such as

<a href="#m1">link to m1</a>

in the page and click them, the browser scrolls to the corresponding element.

Now I would like to programmatically trigger a similar behaviour, but nothing seems to work.

I have tried

  • transitionTo: but it does not even trigger a transition (probably because it is a transition to the same page with just a different hash),
  • changing window.location.hash directly: the hash changes, but the browser does not scroll to the element.

Any idea how to trigger this kind of scrolling behaviour in an Ember app?

2

Don’t have a lot of experience with this myself but I’d think anchor tags would conflict with Ember’s router. This issue would seem to suggest they aren’t really supported. Again not an authority on this so it may still be possible.

As an alternative you could try something like this addon

2 Likes