From a8c0e59a9f73be66f985971c6344192d4ff5f7fb Mon Sep 17 00:00:00 2001
From: Giovanni Abbatepaolo <30571828+bbtgnn@users.noreply.github.com>
Date: Thu, 14 Sep 2023 17:03:04 +0200
Subject: [PATCH] fix: timeline scroll behavior (#112)

---
 .../timeline/page/TimelinePageItem.svelte     | 25 +++++++++++++++++--
 1 file changed, 23 insertions(+), 2 deletions(-)

diff --git a/src/components/timeline/page/TimelinePageItem.svelte b/src/components/timeline/page/TimelinePageItem.svelte
index 170cdf8..71e55bd 100644
--- a/src/components/timeline/page/TimelinePageItem.svelte
+++ b/src/components/timeline/page/TimelinePageItem.svelte
@@ -1,17 +1,38 @@
 <script lang="ts">
+	import { onMount } from 'svelte';
 	import { timelineColors } from '../colors';
 	import type { TimelineItem } from '../dataProcess/parse';
 
 	export let item: TimelineItem;
+
 	const colors = timelineColors[item.type] ?? timelineColors['default'];
 	const { bg, accent, border } = colors;
 
 	const isDefault = !Boolean(item.type);
 	const isMilestone = item.importance == '0';
-	console.log(item);
+
+	/* Scrolling behavior */
+
+	const anchorId = encodeURIComponent(item.title);
+	const anchor = window.location.hash.substring(1);
+	const isAnchor = anchorId == anchor;
+
+	let thisEl: HTMLDivElement;
+
+	onMount(() => {
+		if (!isAnchor) return;
+		const headerOffset = 45;
+		const elementPosition = thisEl.getBoundingClientRect().top;
+		const offsetPosition = elementPosition + window.scrollY - headerOffset;
+
+		window.scrollTo({
+			top: offsetPosition,
+			behavior: 'smooth',
+		});
+	});
 </script>
 
-<div class="relative pl-6 font-sans" id={encodeURIComponent(item.title)}>
+<div bind:this={thisEl} id={anchorId} class="relative pl-6 font-sans">
 	{#if item.restOfDate}
 		<div
 			class={`hidden md:block absolute top-0.5 -left-32 text-primary-light pr-2 w-28 text-right text-xl ${