From 840cc1166470920383618919a4ebc15716316672 Mon Sep 17 00:00:00 2001
From: Samuel Fang <samuelfangjw@gmail.com>
Date: Sat, 19 Jun 2021 14:09:10 +0800
Subject: [PATCH] SICP-INTERACTIVE: Fix scrolling behaviour  (#1811)

* Fix scroll into view causing page to shift

* Fix prettier formatting
---
 src/pages/sicp/Sicp.tsx | 8 ++++----
 src/styles/_sicp.scss   | 1 -
 2 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/src/pages/sicp/Sicp.tsx b/src/pages/sicp/Sicp.tsx
index b3abcc199a..74f2bbc9cd 100644
--- a/src/pages/sicp/Sicp.tsx
+++ b/src/pages/sicp/Sicp.tsx
@@ -109,12 +109,12 @@ const Sicp: React.FC<SicpProps> = props => {
   }, [section]);
 
   // Scroll to correct position
-  React.useLayoutEffect(() => {
+  React.useEffect(() => {
     const hash = props.location.hash;
 
     if (!hash) {
       if (topRef.current) {
-        topRef.current.scrollIntoView();
+        topRef.current.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
       }
       return;
     }
@@ -122,9 +122,9 @@ const Sicp: React.FC<SicpProps> = props => {
     const ref = refs.current[hash];
 
     if (ref) {
-      ref.scrollIntoView({ block: 'start' });
+      ref.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
     }
-  }, [props.location.hash, data]);
+  }, [props.location.hash]);
 
   // Close all active code snippet when new page is loaded
   React.useEffect(() => {
diff --git a/src/styles/_sicp.scss b/src/styles/_sicp.scss
index bc4ace2f91..1b1557100f 100644
--- a/src/styles/_sicp.scss
+++ b/src/styles/_sicp.scss
@@ -41,7 +41,6 @@ $sicp-background-color: #ffffff;
     margin: 1em auto;
     padding: 0 6em;
     max-width: 1050px;
-
     height: fit-content;
     background-color: $sicp-background-color;