Add: Arrow to scroll from title

inc/src/app/app.component.html

@@ -21,6 +21,7 @@
     </div>
     <div class="col right"></div>
   </div>
+  <div class="arrow" (click)="scrollTo('podcasts')"></div>
 </section>
 
 <!-- space -->
@@ -33,7 +34,7 @@
 </section> -->
 <!-- end space -->
 
-<section class="container middle" *ngFor="let n of news; let index;">
+<section id="podcasts" class="container middle" *ngFor="let n of news; let index;">
   <div class="content columns">
     <div class="col center">
       <div class="button big" [ngStyle]="{transform:'translateX('+n.random+'vw)'}">
@@ -43,13 +44,13 @@
   </div>
 </section>
 <!-- space -->
-<section class="container big">
+<!-- <section class="container big">
   <div class="content columns">
     <div class="col left"></div>
     <div class="col center"></div>
     <div class="col right"></div>
   </div>
-</section>
+</section> -->
 <!-- end space -->
 
 <section class="container big text">

inc/src/app/app.component.ts

@@ -1,5 +1,6 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, Inject } from '@angular/core';
 import { PlayerService } from './player.service';
+import { DOCUMENT, Location } from '@angular/common';
 
 @Component({
   selector: 'app-root',
@@ -15,7 +16,8 @@ export class AppComponent implements OnInit {
   news:any[] = [{title:'1',random:0},{title:'1',random:0},{title:'1',random:0},{title:'1',random:0},{title:'1',random:0}]
 
   constructor(
-    public playerService:PlayerService
+    public playerService:PlayerService,
+    @Inject(DOCUMENT) private document: Document
   ) {
 
     playerService.init_app$
@@ -39,4 +41,10 @@ export class AppComponent implements OnInit {
     let min=-40
     return Math.floor(Math.random() * (max - min + 1) + min)
   }
+
+  scrollTo(id:string) {
+    let element:any = document.getElementById(id);
+    element.scrollIntoView({ behavior: "smooth", block: "start", inline: "nearest" });
+
+  }
 }

inc/src/app/header/header.component.scss

@@ -20,3 +20,4 @@ section.header {
         a { cursor:pointer;}
     }
 }
+

inc/src/styles.scss

@@ -14,6 +14,18 @@ body {
 
 
 section.container {
+    div.arrow {
+        width:32px;
+        height:32px;
+        position:absolute;
+        bottom:16px;
+        left:calc( 50vw - 16px );
+        transform:rotate(45deg);
+        border: 5px solid #000;
+        border-left:0;
+        border-top:0;
+        cursor:pointer;
+    }
     &.big { min-height:100vh;}
     &.middle { min-height: 50vh;}
     &.fixed {