Merge pull request #20 from 4Furki4/daily-word-and-phrase

add: scrollToTop when anchor el clicked.
4Furki4 · Jun 9, 2023 · be27cdd · be27cdd · vercel · Jun 9, 2023
2 parents 1a7e5fa + 19d43bb
commit be27cdd
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 3 deletions.
diff --git a/src/app/components/main/daily-word-and-phrase/daily-word-and-phrase.component.html b/src/app/components/main/daily-word-and-phrase/daily-word-and-phrase.component.html
@@ -4,7 +4,7 @@ <h2 class="card__title">Bir Kelime</h2>
         <div class="card--inner">
             <div class="card__word">
                 <h3>
-                    <a [routerLink]="word.madde">{{word.madde}}</a>
+                    <a (click)="scrollToTop()" [routerLink]="word.madde">{{word.madde}}</a>
                 </h3>
             </div>
             <div class="card__definition">
@@ -19,7 +19,7 @@ <h2 class="card__title">Bir Deyim-Atasözü</h2>
         <div class="card--inner">
             <div class="card__word">
                 <h3>
-                    <a [routerLink]="phrase.madde">{{phrase.madde}}</a>
+                    <a (click)="scrollToTop()" [routerLink]="phrase.madde">{{phrase.madde}}</a>
                 </h3>
             </div>
             <div class="card__definition">

diff --git a/src/app/components/main/daily-word-and-phrase/daily-word-and-phrase.component.ts b/src/app/components/main/daily-word-and-phrase/daily-word-and-phrase.component.ts
@@ -1,5 +1,5 @@
 import { animate, style, transition, trigger } from '@angular/animations';
-import { Component, Input } from '@angular/core';
+import { Component, Host, HostListener, Input } from '@angular/core';
 import { Kelime, Atasoz } from 'src/app/models/home-content-response';
 const enterSlideInRight = trigger('enterSlideInRight', [
   transition(':enter', [
@@ -22,6 +22,15 @@ const enterSlideInLeft = trigger('enterSlideInLeft', [
 export class DailyWordAndPhraseComponent {
   constructor() {
 
+  }
+  position: number = 0;
+  scrollToTop() {
+    const isPortrait = window.innerWidth < window.innerHeight;
+    if (isPortrait) {
+      setTimeout(() => {
+        window.scrollTo({ top: 0, behavior: 'smooth' })
+      }, 100)
+    }
   }
   @Input('kelime') word!: Kelime
   @Input('atasozu') phrase!: Atasoz;