Simple scroll-to-anchor support for Ember.js apps
npm install ember-anchor
!NPM Version

ember install ember-anchor
The easiest way to use ember-anchor is to setup a controller with a queryParam, and bind it to the {{ember-anchor}} component.
Add this component to the template corresponding to the controller or route where your queryParams may live, passing in the queryParam to be used as your "anchor" param, to the component as property a.
##### app/templates/application.hbs
``hbs`
{{ember-anchor a=anc}}
On your controller, add a mixin that allows us to use a queryParam like a #hash.
##### app/controllers/application.js
`js
import Ember from 'ember';
import ControllerSupport from 'ember-anchor/mixins/controller-support';
export default Ember.Controller.extend(ControllerSupport, {
queryParams: ['anc'],
anc: 'first'
});
`
Now you may build links with a queryParam, and add "anchors" to arbitrary elements in the page, which can be scrolled to.
##### app/templates/index.hbs
`hbs
{{link-to 'Go to First' 'index'
(query-params anc='first') }}
{{link-to 'Go to Second' 'index'
(query-params anc='second') }}
{{link-to 'Go to Third' 'index'
(query-params anc='third') }}
`
And on your view, add a mixin that scrolls the page to the appropriate position, based on a queryParam, and in response to queryParam changes
##### app/views/index.js
`js
import Ember from 'ember';
import ViewSupport from 'ember-anchor/mixins/view-support';
export default Ember.View.extend(ViewSupport, {
});
`
Build links in the same way as described above
You can customize the queryParam used for anchors on a single view, by overriding the anchorQueryParam property on both the controller and view
##### app/controllers/customized.js
`js
import Ember from 'ember';
import ControllerSupport from 'ember-anchor/mixins/controller-support';
export default Ember.Controller.extend(ControllerSupport, {
anchorQueryParam: 'custom',
queryParams: ['custom'],
custom: 'first'
});
`
##### app/views/customized.js
`js
import Ember from 'ember';
import ViewSupport from 'ember-anchor/mixins/view-support';
export default Ember.View.extend(ViewSupport, {
anchorQueryParam: 'custom'
});
`
You should then build your links, and add your data-* attributes as follows
`handlebars
{{link-to 'Go to First' 'index'
(query-params custom='first') }}
`
If you wish to use a different queryParam other than anchor, as the application-wide default you can configure this addon as follows
app/configure/environment.js
`js
var ENV = {
...
emberAnchor: {
anchorQueryParam: 'a'
},
...
};
...
return ENV;
`
You should then build your links, and add your data-* attributes as follows
`handlebars
{{link-to 'Go to First' 'index'
(query-params a='first') }}
`
* git clone this repositorynpm install
* bower install
*
* ember server
* Visit your app at http://localhost:4200.
* ember testember test --server
*
* ember build`
For more information on using ember-cli, visit http://www.ember-cli.com/.