From d6fb2e42097887dd7a840d3f8377b39ee6284d0f Mon Sep 17 00:00:00 2001
From: Muthu Kumar <muthukumar@thefeathers.in>
Date: Thu, 22 Jul 2021 05:37:28 +0530
Subject: [PATCH] (fix) scroll flashing, scroll to top on page nav

Signed-off-by: Muthu Kumar <muthukumar@thefeathers.in>
---
 src/components/Container.tsx | 7 +++++--
 src/index.css                | 1 +
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/components/Container.tsx b/src/components/Container.tsx
index 4860c76..a3f260c 100644
--- a/src/components/Container.tsx
+++ b/src/components/Container.tsx
@@ -46,11 +46,14 @@ const Container: React.FunctionComponent<{
 			!child || typeof child === "string"
 				? child
 				: React.cloneElement(child, {
-						style: { opacity: 0, marginBottom: "5rem", transition: "all 300ms" },
+						style: { opacity: 0, transform: "translateY(3rem)", transition: "all 300ms" },
 				  }),
 	);
 
 	useEffect(() => {
+		// scroll back to top when new page is loaded
+		window.scrollTo({ top: 0 });
+
 		if (highlightCircle.current) {
 			highlightCircle.current.classList.add(flash);
 			timer(() => highlightCircle.current && highlightCircle.current.classList.remove(flash), 1500);
@@ -69,7 +72,7 @@ const Container: React.FunctionComponent<{
 			containerChildren.forEach((child, idx) => {
 				timer(() => {
 					child.style.removeProperty("opacity");
-					child.style.removeProperty("margin-bottom");
+					child.style.removeProperty("transform");
 				}, 100 * idx);
 			});
 
diff --git a/src/index.css b/src/index.css
index 97b199a..c7f7189 100644
--- a/src/index.css
+++ b/src/index.css
@@ -10,6 +10,7 @@
 
 * {
 	box-sizing: border-box;
+	scroll-behavior: smooth;
 }
 
 body {