feat: click on curent column nav button to go to the top of the timeline

routes/_actions/scroll.js

@@ -0,0 +1,30 @@
+const easingOutQuint = (x, t, b, c, d) =>
+  c * ((t = t / d - 1) * t * t * t * t + 1) + b
+
+const scroll = (node, key, target) => {
+  const startTime = Date.now()
+  const offset = node[key]
+  const gap = target - offset
+  const duration = 1000
+  let interrupt = false
+
+  const step = () => {
+    const elapsed = Date.now() - startTime
+    const percentage = elapsed / duration
+
+    if (percentage > 1 || interrupt) {
+      return
+    }
+
+    node[key] = easingOutQuint(0, elapsed, offset, gap, duration)
+    requestAnimationFrame(step)
+  }
+
+  step()
+
+  return () => {
+    interrupt = true
+  }
+}
+
+export const scrollTop = node => scroll(node, 'scrollTop', 0)

routes/_components/Nav.html

@@ -1,25 +1,25 @@
 <nav class="main-nav">
 	<ul class="main-nav-ul">
-		<li class="main-nav-li">
+		<li class="main-nav-li" on:click="onClick(event, '/')">
       <NavItem :page name="home" href="/" svg="#pinafore-logo" label="Home" />
 		</li>
-		<li class="main-nav-li">
+		<li class="main-nav-li" on:click="onClick(event, '/notifications')">
       <NavItem :page name="notifications" href="/notifications" svg="#fa-bell" label="Notifications" />
 		</li>
     {{#if $pinnedPage === '/local'}}
-      <li class="main-nav-li">
+      <li class="main-nav-li" on:click="onClick(event, '/local')">
         <NavItem :page name="local" href="/local" svg="#fa-users" label="Local" />
       </li>
     {{elseif $pinnedPage === '/federated'}}
-      <li class="main-nav-li">
+      <li class="main-nav-li" on:click="onClick(event, '/federated')">
         <NavItem :page name="federated" href="/federated" svg="#fa-globe" label="Federated" />
       </li>
     {{elseif $pinnedPage === '/favorites'}}
-      <li class="main-nav-li">
+      <li class="main-nav-li" on:click="onClick(event, '/favorites')">
         <NavItem :page name="favorites" href="/favorites" svg="#fa-star" label="Favorites" />
       </li>
     {{elseif $pinnedPage.startsWith('/lists/')}}
-      <li class="main-nav-li">
+      <li class="main-nav-li" on:click="onClick(event, '/lists')">
         <NavItem :page name="lists" href="{{$pinnedPage}}" svg="#fa-bars" label="{{$pinnedListTitle}}" />
       </li>
     {{/if}}
@@ -68,11 +68,20 @@
 <script>
   import NavItem from './NavItem'
   import { store } from '../_store/store'
+  import { scrollTop } from '../_actions/scroll'
 
   export default {
     store: () => store,
     components: {
       NavItem
+    },
+    methods: {
+      onClick(event, path) {
+        if (window.location.pathname === path || (window.location.pathname.startsWith(path) && window.location.pathname === '/')) {
+          scrollTop(document.querySelector('.container'))
+          event.preventDefault()
+        }
+      }
     }
   }
 </script>