Skip to main content
Ben Nadel
On User Experience (UX) Design, JavaScript, ColdFusion, Node.js, Life, and Love.

Restoring And Resetting The Scroll Position On Navigation With A Polyfill In Angular 5.2.3

By Ben Nadel on

In a "normal" web application, with a full round-trip request-response life-cycle, restoring and resetting the scroll position of the page is simple: the browser's native functionality just handles it for you. But, in a Single-Page Application (SPA), were pages are rendered with DOM (Document Object Model) manipulation and populated with AJAX (Asynchronous JavaScript and JSON) payloads, managing scroll position is anything but trivial. Throw in the ability for Angular to render multiple router outlets simultaneously, and the problem gets even more complicated. Over the past few weeks, I've been trying to come up with a "polyfill" module for Angular 5.2.3 that seamlessly handles scroll restoration and resetting for your. And while my solution doesn't work all the time - and the nuances of the browser's "pop state" history API continue to confuse me - I think what I have comes pretty close to being "helpful."

CAUTION: Use this as your own risk - I haven't tested it in a production-grade application.