From b31a411f32a3d91e00be4efbe2345cf574684c12 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jos=C3=A9=20Manuel=20Barroso=20Galindo?=
 <theypsilon@gmail.com>
Date: Thu, 20 Jun 2024 23:42:45 +0200
Subject: [PATCH] Fixing explanation anchor.

---
 www/src/view/landing_page/landing_template.ts | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/www/src/view/landing_page/landing_template.ts b/www/src/view/landing_page/landing_template.ts
index be7d51f..86b5079 100644
--- a/www/src/view/landing_page/landing_template.ts
+++ b/www/src/view/landing_page/landing_template.ts
@@ -60,6 +60,10 @@ export class LandingTemplate {
         this._root.getElementById('file')?.click()
     }
 
+    private async scrollToExplanation(_: Event) {
+        this._root.getElementById('explanation')?.scrollIntoView({ behavior: 'smooth'})
+    }
+
     private async dropOnDropZone(e: DataEvent) {
         e.stopPropagation();
         e.preventDefault();
@@ -96,7 +100,7 @@ export class LandingTemplate {
                 </div>
                 <div class="col-md-4 col-md-offset-2 col-sm-12 text-center">
                     <p>Don't get why this is a thing?</p>
-                    <a class="btn btn-crt btn-green text-white" href="#explanation">Read some explanation below</a>
+                    <a class="btn btn-crt btn-green text-white" @click="${this.scrollToExplanation.bind(this)}">Read some explanation below</a>
                 </div>
             </div>
         </header>
@@ -144,7 +148,7 @@ export class LandingTemplate {
             </form>
         </section>
 
-        <section class="container explanation">
+        <section class="container explanation" id="explanation">
             <h3>Explanation:</h3>
             <a name="explanation"></a>
             <p>Old displays were designed to work with analog video signals carrying low resolution content. They used