Ember.js: HTML Anchor hash support in link-to template

Created on 23 Feb 2016 · 10Comments · Source: emberjs/ember.js

I'm working on a single-page app where the index route has many sections as a user scrolls down their screen. For this to work, I want to use the HTML anchor hash property. I see in this closed issue from last year that Ember supports default browser behavior of linking to anchor hash properties, for which I'm grateful. It also mentions the possibility of creating a "fragment" feature of the {{link-to}} component. When I try it on my site (Em 2.3.0) and in this twiddle, it doesn't work, and I don't see it in the source code.

Is this a supported feature, whether now or in the future? I notice that when I just put a element in my handlebars template, the user's click of the anchor hash ends up triggering a reload of the page when I'm on another route rather than a mere route transition, which is why I'd like to use {{link-to}} instead of a mere element. How else might I utilize anchor hash properties in Ember?

Thanks,

Bryan

Bug Has Reproduction

Source

bkCDL

Most helpful comment

Yea, this would be real nice.

{{link-to "Cool Feature" "features#cool"}}   -->   <a href="/features#cool">Features</a>

jakeleboeuf on 27 Jan 2017

👍38

All 10 comments

There is no hash/fragment support in the router or with link-to.

I'm not sure why <a href="#some-id"> isn't working in ember-twiddle. It does work fine in JSbin:

http://emberjs.jsbin.com/gabune

mmun on 23 Feb 2016

@mmun does this seem like a twiddle only issue or have i misread?

stefanpenner on 26 Feb 2016

Yes, the specific issue reported here seems to be in ember-twiddle. It would be nice to have better hash/fragment support in the router but should be discussed in the RFCs repo.

mmun on 26 Feb 2016

I am using locationType="history" and an anchor like this:

admin

reloads the page to "http://localhost:4200/#c4412370-e892-11e4-a199-000c29a61086"

This is with Ember-cli/Ember 2.4.1.

cfator on 5 Mar 2016

I don't think this is a Twiddle-only issue. Here is a JSBin where the issue doesn't show up on the index route, but it does show up on any other route.

To reproduce:

Visit http://jsbin.com/bilewi
Click on "bottom" - works fine
Scroll back up and click on "foo" - you are now on the foo page
Click on "bottom" - should take you to the bottom of the foo page, but instead it takes you to the bottom of the index page

I am experiencing the same issue with anchor links in my Ember 2.4.3 app

camunching on 25 Mar 2016

Note: <a href='#foo'> works fine if you are on the index route. It does not work correctly on other routes, instead causing a full page refresh

alexspeller on 18 Oct 2016

👍1

Yea, this would be real nice.

{{link-to "Cool Feature" "features#cool"}}   -->   <a href="/features#cool">Features</a>

jakeleboeuf on 27 Jan 2017

👍38

Any new ideas about this? I have tried ember-anchor which is a nice add-on, but requires a little too much configuration, and is not standards-compliant regarding anchors anyway. I believe this should be quite an important feature to implement.