Add: Arrow to scroll from title

This commit is contained in:
Luca 2023-10-31 20:15:09 +01:00
parent cbaf0dc1a0
commit 4ed899b259
Signed by: lrullo
GPG Key ID: A04E97D8E19A58A7
4 changed files with 28 additions and 6 deletions

View File

@ -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">

View File

@ -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" });
}
}

View File

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

View File

@ -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 {