Linking to anchors does not scroll to point on page

[CodingItWrong]

Say you copy a link to a specific anchor on a page, such as:

https://ember-decorators.github.io/ember-decorators/latest/docs/api/modules/@ember-decorators/service#service

The user would expect that loading this URL in a new tab would automatically scroll you to the #service anchor on the page. But it doesn't seem to; it seems to keep me at the top of the page. I assume this is because of the way the page loads, how that anchor is not present at first.

If possible, it could be nice to do some JS magic to scroll down to that appropriate point on the page once the page is loaded!

[pzuraq]

Related to #202, in general linking is limited this way. I think support for anchors may need to be added to the Ember router itself.

[samselikoff]

I consider this a bug as long as we append # to the URL, since the affordance is that will work as a sharable link. We should either fix this (strong prefer) or not change the URL history.

[makepanic]

If anyone is looking for a cheap fix until this is properly solved, you can reopen the route class in an initializer and implement scrolling the anchor into view:

  Route.reopen({
    afterModel() {
      this._super(...arguments);

      scheduleOnce('afterRender', null, () => {
        if (location.hash.length) {
          const anchor = document.querySelector(`a[href="${location.hash}"`);
          if (anchor) {
            anchor.scrollIntoView();
          }
        }
      });
    }
  })

It's not pretty but works for me

[samselikoff]

@makepanic if you want to PR this I'd accept it, I think it's better than what we have now!