fix(aio): fix scrolling to top (#17102)

Previously, the `#top-of-page` element (used when scrolling to top) was placed
inside the content section (which at the time had zero top margin and padding).
Furthermore, there was a top offset applied when scrolling that took the static
top bar's height into account. Since now the top bar is not static any more and
the content section has a non-zero top padding, scrolling to top does not work
as expected.

This commit fixes this by:
- Moving the `#top-of-page` element to the top of the `aio-shell`.
- Stop accounting for the top bar's top.

Fixes #17006

aio/e2e/app.e2e-spec.ts

@@ -41,6 +41,26 @@ describe('site App', function() {
     expect(page.getInnerHtml(codeExample)).toContain('<h1>Tour of Heroes</h1>');
   });
 
+  describe('scrolling to the top', () => {
+    it('should scroll to the top when navigating to another page', () => {
+      page.navigateTo('guide/docs');
+      page.scrollToBottom();
+      page.getScrollTop().then(scrollTop => expect(scrollTop).toBeGreaterThan(0));
+
+      page.navigateTo('guide/api');
+      page.getScrollTop().then(scrollTop => expect(scrollTop).toBe(0));
+    });
+
+    it('should scroll to the top when navigating to the same page', () => {
+      page.navigateTo('guide/docs');
+      page.scrollToBottom();
+      page.getScrollTop().then(scrollTop => expect(scrollTop).toBeGreaterThan(0));
+
+      page.navigateTo('guide/docs');
+      page.getScrollTop().then(scrollTop => expect(scrollTop).toBe(0));
+    });
+  });
+
   describe('api-docs', () => {
     it('should show a link to github', () => {
       page.navigateTo('api/common/NgClass');

aio/e2e/app.po.ts

@@ -42,6 +42,14 @@ export class SitePage {
     return browser.executeScript('return arguments[0].innerHTML;', element);
   }
 
+  getScrollTop() {
+    return browser.executeScript('return window.pageYOffset');
+  }
+
+  scrollToBottom() {
+    return browser.executeScript('window.scrollTo(0, document.body.scrollHeight)');
+  }
+
   /**
    * Replace the ambient Google Analytics tracker with homebrew spy
    * don't send commands to GA during e2e testing!

aio/src/app/app.component.html

@@ -1,3 +1,5 @@
+<div id="top-of-page"></div>
+
 <div *ngIf="isFetching" class="progress-bar-container">
   <md-progress-bar mode="indeterminate" color="warn"></md-progress-bar>
 </div>
@@ -28,7 +30,6 @@
   </md-sidenav>
 
   <section class="sidenav-content" [id]="pageId" role="content">
-    <div id="top-of-page"></div>
     <aio-doc-viewer [doc]="currentDocument" (docRendered)="onDocRendered()"></aio-doc-viewer>
     <aio-dt [on]="dtOn" [(doc)]="currentDocument"></aio-dt>
   </section>

aio/src/app/shared/scroll.service.spec.ts

@@ -17,7 +17,6 @@ describe('ScrollService', () => {
   class MockDocument {
     body = new MockElement();
     getElementById = jasmine.createSpy('Document getElementById');
-    querySelector = jasmine.createSpy('Document querySelector');
   }
 
   class MockElement {

aio/src/app/shared/scroll.service.ts

@@ -12,11 +12,12 @@ export class ScrollService {
   private _topOffset: number;
   private _topOfPageElement: Element;
 
-  /** Offset from the top of the document to bottom of toolbar + some margin */
+  // Offset from the top of the document to bottom of any static elements
+  // at the top (e.g. toolbar) + some margin
   get topOffset() {
     if (!this._topOffset) {
-      const toolbar = document.querySelector('md-toolbar.app-toolbar');
-      this._topOffset = (toolbar ? toolbar.clientHeight : 0) + topMargin;
+      // Since the toolbar is not static, we don't need to account for its height.
+      this._topOffset = topMargin;
     }
     return this._topOffset;
   }

aio/src/app/shared/toc.service.spec.ts

@@ -243,6 +243,11 @@ describe('TocService', () => {
       expect(tocItem.href).toEqual(`${docId}#heading-one-special-id`);
     });
 
+    it('should have level "h1" for an <h1>', () => {
+      const tocItem = lastTocList.find(item => item.title === 'Fun with TOC');
+      expect(tocItem.level).toEqual('h1');
+    });
+
     it('should have level "h2" for an <h2>', () => {
       const tocItem = lastTocList.find(item => item.title === 'Heading one');
       expect(tocItem.level).toEqual('h2');