# Handle incoming links with \`#\`

**URL:** https://discuss.emberjs.com/t/handle-incoming-links-with/4839
**Category:** Uncategorized
**Created:** [April 11, 2014, 12:35am UTC](https://discuss.emberjs.com/t/handle-incoming-links-with/4839 "2014-04-11T00:35:49Z")
**Posts on this page:** 7
**Page:** 1

<div class="post-metadata">

### Author: ![mikepmunroe](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/mikepmunroe/32/15513_2.png) [@mikepmunroe](https://discuss.emberjs.com/u/mikepmunroe)
#### Post date: [April 11, 2014, 12:35am UTC](https://discuss.emberjs.com/t/handle-incoming-links-with/4839/1 "2014-04-11T00:35:49Z")

</div>

I have an ember site that also has a static blog that links back to the ember site. On the blog, I have some links that link back to internal anchors within the ember site;

```
<li><a href="http://test.com#home">Home</a></li>
<li><a href="http://test.com#about">About</a></li>
<li><a href="http://test.com#team">Team</a></li>

```

Ember treats these as routes. What is the best way to have ember treat these links as internal anchors that come in from an external site rather than as a route?

---

<div class="post-metadata">

### Author: ![davekaro](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/davekaro/32/15036_2.png) [@davekaro](https://discuss.emberjs.com/u/davekaro)
#### Post date: [April 11, 2014, 1:46pm UTC](https://discuss.emberjs.com/t/handle-incoming-links-with/4839/2 "2014-04-11T13:46:40Z")

</div>

Check out [https://github.com/emberjs/ember.js/issues/4098](https://github.com/emberjs/ember.js/issues/4098) for details. Unclear whether this is supported or not

---

<div class="post-metadata">

### Author: ![THuRStoN](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/thurston/32/15524_2.png) [@THuRStoN](https://discuss.emberjs.com/u/THuRStoN)
#### Post date: [April 14, 2014, 3:44pm UTC](https://discuss.emberjs.com/t/handle-incoming-links-with/4839/3 "2014-04-14T15:44:52Z")

</div>

So far I’ve been looking at:

> <https://stackoverflow.com/questions/18445661/ember-js-anchor-link>

[http://www.unknownerror.org/Problem/index/-1259968286/emberjs-anchor-link/](http://www.unknownerror.org/Problem/index/-1259968286/emberjs-anchor-link/)

I’ve tried to use Query Params (w/ 1.6.0-beta.2) without success so I’ll go with handling anchors with actions.

So I’m also interested in knowing the official way to handle anchors within an ember app _THE RIGHT WAY_.

Any help is welcome.

---

<div class="post-metadata">

### Author: ![THuRStoN](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/thurston/32/15524_2.png) [@THuRStoN](https://discuss.emberjs.com/u/THuRStoN)
#### Post date: [April 14, 2014, 3:55pm UTC](https://discuss.emberjs.com/t/handle-incoming-links-with/4839/4 "2014-04-14T15:55:03Z")

</div>

Regarding QP this may help: [EmberConf 2014: Mr. Router embraces the Controller - Alex Matchneer - Speaker Deck](https://speakerdeck.com/machty/emberconf-2014-mr-router-embraces-the-controller-alex-matchneer)

---

<div class="post-metadata">

### Author: ![mikepmunroe](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/mikepmunroe/32/15513_2.png) [@mikepmunroe](https://discuss.emberjs.com/u/mikepmunroe)
#### Post date: [April 15, 2014, 6:31pm UTC](https://discuss.emberjs.com/t/handle-incoming-links-with/4839/5 "2014-04-15T18:31:27Z")

</div>

Thanks for the leads Thurston. We went with a query param solution for our needs.

---

<div class="post-metadata">

### Author: ![richiekhoo](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/richiekhoo/32/9467_2.png) [@richiekhoo](https://discuss.emberjs.com/u/richiekhoo)
#### Post date: [January 28, 2015, 2:42pm UTC](https://discuss.emberjs.com/t/handle-incoming-links-with/4839/6 "2015-01-28T14:42:12Z")

</div>

> [@davekaro](#):
>
> Check out [History location needs support for URL hash/fragment · Issue #4098 · emberjs/ember.js · GitHub](https://github.com/emberjs/ember.js/issues/4098) for details. Unclear whether this is supported or not

There has been some great progress on [Issue #4098](https://github.com/emberjs/ember.js/issues/4098) towards adding anchor support so we can “use anchor links properly”. Support for [Bootstrap Scrollspy in Ember](https://stackoverflow.com/questions/16164566/section-links-with-ember-js) is also affected by this as it relies on anchor tags.

(As I said over on stackoverflow relating scrollspy)

The issue has been that at it’s core Ember relies on hacking the hash (‘#’) in a url and using it for it’s own purposes. There hasn’t been support for this type of url. [http://example.com/#/about#faq](http://example.com/#/about#faq)

I’m now happy to report that as of Ember 1.9.0, url’s with more than one hash(‘#’) are now basically supported.

Jay Phelps provided the fix on Issue #4098 and had this to say in Jan 2015:

> We can see that it [Fix #4098] landed in the stable v1.9.0 release.
> 
> There is not yet any code that will actually scroll the page to an id=“anchor” for you, though. The changes made were to allow that sort of code to happen. I’ve talked with some of the core members about such an implementation and still plan to try and add it to core but in the meantime you can definitely use \>=1.9.0 and add your own code to do so, which should be fairly straight forward for simple cases:
> 
> Something like this but totally untested:

```
didTransition: function () {   
 Ember.run.schedule('afterRender', this,
 function () {
     if (window.location.hash) {
       var el = document.getElementById(window.location.hash.substr(1));
       if (el) {
         el.scrollIntoView();
       }
     }   
   }); 
 } 

```

> As I find cycles to work on this I’ll have a working example, but I suggest you plow ahead with your own if you can.

I’m keen for everyone to give this a try as I think proper anchor support for native html anchor tags is much better than having to convert intended anchor tags into query params just to get things working.

---

<div class="post-metadata">

### Author: ![simontseng](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/simontseng/32/15608_2.png) [@simontseng](https://discuss.emberjs.com/u/simontseng)
#### Post date: [September 23, 2015, 1:20pm UTC](https://discuss.emberjs.com/t/handle-incoming-links-with/4839/7 "2015-09-23T13:20:58Z")

</div>

Although this is an old topic. i found myself still encounter this problem.

I believe for the majority using ember for the web locationType: ‘auto’ works fine, so this problem might not be relevant. However when using ember on hybrid mobile app (cordova/phonegap), as far as i am aware i am stuck with locationType: ‘hash’ and this is still an issue.

As far as scrollspy is concerned, has it occur to anybody it might be problem on the bootstrap side?

When I switch to locationType: ‘hash’ i get this error from scrollspy

```
Uncaught Error: Syntax error, unrecognized expression: #/posts

```

in the bootstrap it is doing this

```
   var $href = /^#./.test(href) && $(href)

```

see [https://github.com/twbs/bootstrap/blob/master/js/scrollspy.js#L60](https://github.com/twbs/bootstrap/blob/master/js/scrollspy.js#L60)

It appears to be testing if the href is a valid fragment the regular express think it is but $(href) generate error. I would think the problem at least with scrollspy it needs a better or maybe more robust way to test a valid fragment.

quickly change the regex to /^#\a/ (correct if i am wrong) scrollspy works fine for me. It is very interesting to me and I would probably submit an issue in the bootstrap side.

from [http://www.w3.org/TR/html401/types.html#type-name](http://www.w3.org/TR/html401/types.html#type-name)

> ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens (“-”), underscores (“\_”), colons (“:”), and periods (“.”).

from rfc 3986 [https://tools.ietf.org/html/rfc3986](https://tools.ietf.org/html/rfc3986)

> fragment identifier component is indicated by the presence of a number sign (“#”) character and terminated by the end of the URI.
> 
> ```
> fragment = *( pchar / "/" / "?" )
> 
> ```

so it appers the regex test need to at least satisfy both conditions

looks like it is a “won’t fix” see [https://github.com/twbs/bootstrap/issues/14187](https://github.com/twbs/bootstrap/issues/14187)
