Scroll to hash fragments and history scroll position

Two difficult things in client-side routing:

Navigating to IDs and names with hash # fragments (ex: URL /page#elementId and anchor <a name="elementId"></a>)
Browser history scroll position. When you hit the back button the browser normally scrolls to the last spot where you were on the page.

I want to get these features working if possible. In the mean time you can do something equivalent to hash links with a scrollTo query parameter like this.

http://example.com/page?scrollTo=elementId

<polymer-element name="demo-app">
  <template>
    <app-router id="router" on-activate-route-end="{{scrollTo}}">
      <app-route path="/" import="/pages/home-page.html"></app-route>
      <app-route path="/page" import="/pages/other-page.html"></app-route>
      <app-route path="*" import="/pages/not-found-page.html"></app-route>
    </app-router>
  </template>
  <script>
    Polymer('demo-app', {
      scrollTo: function(event) {
        // look for a scrollTo query parameter
        if (event.details.model.scrollTo) {
          var el = document.querySelector('#' + event.details.model.scrollTo);
          if (el && el.scrollIntoView) {
            el.scrollIntoView(true);
          }
        }
      }
    });
  </script>
</polymer-element>

You can find the documentation on scrollIntoView() here https://developer.mozilla.org/en-US/docs/Web/API/Element.scrollIntoView.

This isn't supported by all browsers, but it's an example of a workaround. Tweak it to your needs and hopefully I can find a way to make the router scroll correctly when possible.

erikringsmuth / app-router

Scroll to hash fragments and history scroll position #46