From e25b6fe5b933ca896550da76a426745c19a6daf3 Mon Sep 17 00:00:00 2001
From: yuanchuan <yuanchuan23@gmail.com>
Date: Mon, 21 Aug 2023 16:13:45 +0800
Subject: [PATCH] Call scrollIntoView for active nav

---
 src/routes/+page.svelte | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 02536eb..d4b20e7 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -2,7 +2,7 @@
   <div class="example-list">
     <ul>
       {#each exampleNames as name}
-        <li><a href="{base}?name={name}" class:active={selectedName === name} on:click={handleSelectListItem(name)}>{name}</a></li>
+        <li><a href="{base}?name={name}" use:scrollIntoView class:active={selectedName === name} on:click={handleSelectListItem(name)}>{name}</a></li>
       {/each}
     </ul>
   </div>
@@ -133,6 +133,14 @@
     history.replaceState('', '', location.pathname + '?' + query.toString());
   }
 
+  function scrollIntoView(element) {
+    setTimeout(() => {
+      if (element.classList.contains('active')) {
+        element.scrollIntoView({ behavior: 'smooth' });
+      }
+    });
+  }
+
   onMount(() => {
     let query = new URLSearchParams(location.search);
     let name = query.get('name');