use native css smooth scrolling

use polyfill for browsers that don't support it natively (Safari), and
respect user preference for reduced motion (currently only supported in
Firefox)

assets/css/year-in-review.scss

@@ -23,7 +23,17 @@
 }
 
 
-/* General */
+html {
+  scroll-padding-top: 0rem;
+  // smooth scrolling unless user has requested not to
+  --scroll-behavior: smooth;
+  scroll-behavior: smooth;
+
+  @media (prefers-reduced-motion: reduce) {
+      --scroll-behavior: auto;
+      scroll-behavior: auto;
+  }
+}
 
 .YIR-wrapper {
   color: white;
@@ -519,10 +529,13 @@ span.metric-name {
     padding-top: var(--feather-grid-mega); /* FIX - DELETE if i make top nav stick to top */
   }
 
+  html {
+    scroll-padding-top: 2.5rem;
+  }
   nav {
     background-color: var(--tw-color-blue-medium);
   }
-  
+
   // Copied from main.css because mobile navigation is activated at a wider width on this page
   #menu-toggle {
     display: block;

static/js/year-in-review.js

@@ -83,21 +83,15 @@ document.querySelectorAll("#nav-menu a").forEach(e => {
   e.addEventListener("click", () => {
     document.getElementById('nav-menu').classList.remove('active')
   })
-})
-
-// Smooth scrolling sections
-// https://codepen.io/nailaahmad/pen/MyZXVE
-$('a[href*=#]:not([href=#])').click(function() {
-    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') 
-        || location.hostname == this.hostname) {
-
-        var target = $(this.hash);
-        target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
-           if (target.length) {
-             $('html,body').animate({
-                 scrollTop: target.offset().top
-            }, 1000);
-            return false;
-        }
-    }
 });
+
+// polyfill smooth scrolling if needed
+if (!('scrollBehavior' in document.documentElement.style)) {
+  Promise.all([
+    import('https://unpkg.com/smoothscroll-polyfill/dist/smoothscroll.min.js'),
+    import('https://unpkg.com/smoothscroll-anchor-polyfill')
+  ])
+  .then(([smoothscrollPolyfill]) => {
+    smoothscrollPolyfill.polyfill();
+  });
+}