Support for links with fragment identifiers

[sdhull]

Background

The HTML5 standard specifies (basically) that if there is a fragment identifier as part of a link (and if an element with that id exists in the resource), then the browser should scroll to that section. It's fairly standard browser behavior and developers have come to expect & rely upon it.

There's an addon for that however it's unclear if it works in FF or IE or if it's still maintained.

The behavior is simulated using query params on Ember API docs, however if developers wish for similar functionality in their apps, that exercise is left to the reader.

Users

Users may find apps built with Ember frustrating, as they may wish to be able to link to sections on pages, and even if that section has an id, they'd find their links don't properly scroll to that id.

Suggested API

{{link-to 'My Special Section' pages.show page fragment="skip-to-the-end"}}}

I don't believe this would require a special helper (like (query-params)) because it's just a simple string. I prefer passing it as a named argument because it's easy to use and you wouldn't need to use concat to use a variable.

emberjs/ember.js#12997 (comment) suggests a different API however it would require concat to use a variable.

Rendering Note

Obviously after rendering, Ember would need to check the URL for a fragment identifier, find an element with a matching id or name, and scroll to it.

[danieledraganti]

Great idea!

Obviously after rendering, Ember would need to check the URL for a fragment identifier, find an element with a matching id or name, and scroll to it.

I believe this could be the most complex point to handle. The fragment parameter should be sent to the destination route, and then the scroll should be triggered on the didRender hook.
Maybe it could be done with standard JS:

location.hash = `#${hash}`;

Or what ever may be more ember-y (if Ember has a different reference to the location global, I currently have no idea).
If anyone wanted to add fancy scroll animations or such, then they could simply override didRender, either for a specific route or globally reopening the route class.

Then there's the whole point about scrolling to anchor hashes within the same page (or route, actually). I must confess I am quite ignorant about this, but I'm sure someone with more knowledge about the matter can chip in.
What I can imagine is that Ember simply ignores any link-to that refers to the same route with the same query-params, but what happens if we add a fragment parameter? Do we go through the whole lifecycle again? Do we just update didRender to trigger the scroll?

Hope we can get to define a good strategy for this, it's sorely missed for anyone wanting to develop a complex website or web application in Ember with attention to standards.

[sdhull]

After some investigation, I've found that the addon ember-router-scroll has code to scroll to a fragment identifier in the URL. This code + making the router put the fragment in the URL (or some variation of these parts) would be an excellent proof-of-concept.

I'm not familiar with the inner workings of the router, and it scares me. If someone out there could point me at the right files in the router to look at, I could probably figure it out enough for the purposes of supporting fragment identifiers.

[wagenet]

I'm closing this due to inactivity. This doesn't mean that the idea present here is invalid, but that, unfortunately, nobody has taken the effort to spearhead it and bring it to completion. Please feel free to advocate for it if you believe that this is still worth pursuing. Thanks!

[NullVoxPopuli]

I think this is very closely related to #709