Ember.js anchor link

Question

I have a login box on homepage that I need to link to. The login box has id=\"login\" in html and I have a link to it like this

Answer 1

If anyone's trying to solve this problem with Ember 3, I've got a solution. It makes use of the same queryParams approach as others have mentioned, but I couldn't get anything to work on the controller. The only approach that I found worked was to use the route + jQuery.ready function.

// route/application.js
import Route from '@ember/routing/route';
import $ from 'jquery';

export default Route.extend({
  queryParams: {
    anchor: null
  },

  setupController: function(controller, context, params) {
    let anchor = params.queryParams.anchor;

    // On ready, find the anchor offset and go there
    $().ready(function() {
      let anchorOffset = $("#" + anchor).offset().top
      window.scrollTo(0, anchorOffset);
    });
  }
});

Then in the template, use your queryParams as usual:

{{#link-to "path.to.page" (query-params anchor="my-anchor")}}My Link{{/link-to}}

Only issue here is that it's reloading the page every time, but apart from that seems to work - hope it helps someone.