Best practice for resetting scroll position between pages?

Question

So even the Polymer website has this issue. This is an SPA-world problem.

Repro: Go to http://www.polymer-project.org/docs/elements/core-elements.html, click on e.g. core-ajax on the left and scroll down to the middle, then goto core-xhr. Note the scroll position.

What are some best practices considering that I a) want to avoid behavior like the above, but also b) want to preserve the scroll position for when I use the back arrow to goto a page I've already been? It'd be nice if core-pages had support built in.

Answer 1

This might work as a workaround. You can use the fire event in polymer, once something fire the event you listen to the call and force the page to scroll to top. At least this solved my problem with core-animated-pages transition: slide-from-right.

Polymer

this.fire('scroll-top')

Index.html

document.addEventListener('scroll-top', function(){
    // Access the main core-header-panel 
    var scaffold = document.querySelector('core-scaffold');
    var scrollArea = scaffold.shadowRoot.querySelector('core-header-panel');
    scrollArea.scroller.scrollTop = 0; // Scroll to top
    }
)