link up menu items to page anchors on components

src/app/about-us/about-us.component.html

@@ -1,5 +1,6 @@
 <div
   class="about-us"
+  id="about-us"
 >
   <h1>ABOUT US</h1>
   <div

src/app/case-studies/case-studies.component.html

@@ -1,3 +1,6 @@
-<div class="case-studies">
+<div
+  class="case-studies"
+  id="case-studies"
+>
   <h1>CASE STUDIES</h1>
 </div>

src/app/contact-us/contact-us.component.html

@@ -1,3 +1,6 @@
-<div class="contact">
+<div
+  class="contact-us"
+  id="contact-us"
+>
   <h1>CONTACT US</h1>
 </div>

src/app/contact-us/contact-us.component.scss

@@ -1,4 +1,4 @@
-.contact {
+.contact-us {
   background-image: url("../../assets/images/astro_clock.jpg");
   background-size: cover;
   min-height: 300px;

src/app/menu/menu.component.html

@@ -5,17 +5,32 @@
   <mat-menu #menu="matMenu">
     <button
       mat-menu-item
-      onclick=""
+      (click)="scroll()"
+    >
+      <span>HOME</span>
+    </button>
+    <button
+      mat-menu-item
+      (click)="scroll('about-us')"
     >
       <span>ABOUT US</span>
     </button>
-    <button mat-menu-item>
+    <button
+      mat-menu-item
+      (click)="scroll('case-studies')"
+    >
       <span>CASE STUDIES</span>
     </button>
-    <button mat-menu-item>
+    <button
+      mat-menu-item
+      (click)="scroll('reviews')"
+    >
       <span>WHAT PEOPLE SAY</span>
     </button>
-    <button mat-menu-item>
+    <button
+      mat-menu-item
+      (click)="scroll('contact-us')"
+    >
       <span>CONTACT US</span>
     </button>
   </mat-menu>

src/app/menu/menu.component.ts

@@ -1,4 +1,5 @@
 import { Component, OnInit } from '@angular/core';
+import { ViewportScroller } from '@angular/common';
 
 @Component({
   selector: 'app-menu',
@@ -7,9 +8,18 @@ import { Component, OnInit } from '@angular/core';
 })
 export class MenuComponent implements OnInit {
 
-  constructor() {}
+  constructor(
+    private viewportScroller: ViewportScroller
+  ) {}
 
   ngOnInit() {
   }
 
+  scroll(anchor: string) {
+    if (anchor) {
+      this.viewportScroller.scrollToAnchor(anchor);
+    } else {
+      this.viewportScroller.scrollToPosition([0, 0]);
+    }
+  }
 }

src/app/reviews/reviews.component.html

@@ -1,3 +1,6 @@
-<div class="reviews">
+<div
+  class="reviews"
+  id="reviews"
+>
   <h1>WHAT PEOPLE SAY</h1>
 </div>