Call scrollIntoView for active nav

css-doodle · Aug 21, 2023 · e25b6fe · e25b6fe
1 parent 1de8dcd
commit e25b6fe
Showing 1 changed file with 9 additions and 1 deletion.
diff --git 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');