scroll to top on navigation

README.md

@@ -22,8 +22,8 @@ The selection of languages and texts is arbitrary and limited, but contributions
 
 ## Kerning tester
 
-The app is equipped with a [kerning string generator](/kerning), along with a couple of predefined kerning patterns. [See kerning generator help](/help#kerning).
+The app is equipped with a <router-link to="/kerning">kerning string generator</router-link>, along with a couple of predefined kerning patterns. <router-link to="/help/kerning">[See kerning generator help]</router-link>
 
 ## Playground
 
-Any open text sample can be edited. In the editor view some more options are available: setting bold and italic (with separately selectable fonts), as well as taking snapshots of the settings and using them as animation keyframes — can be useful for recording gifs or videos, or toggling multiple features on and off more quickly. [See animation editor help](/help#animation).
+Any open text sample can be edited. In the <router-link to="/editor">editor tab</router-link> some more options are available: setting bold and italic (with separately selectable fonts), as well as taking snapshots of the settings and using them as animation keyframes — can be useful for recording gifs or videos, or toggling multiple features on and off more quickly. <router-link to="/help/animation">[See animation editor help]</router-link>

src/App.vue

@@ -17,6 +17,11 @@
 
 <script>
 export default {
+  watch: {
+    $route() {
+      this.$store.commit("scrollToTop");
+    },
+  },
   mounted() {
     window.addEventListener("beforeunload", this.someMethod);
   },

src/components/Welcome.vue

@@ -21,6 +21,9 @@ export default {
   name: "Welcome",
   components: { Readme },
   props: {},
+  mounted() {
+    this.$store.commit("scrollToTop");
+  },
 };
 </script>
 

src/main.js

@@ -1,4 +1,5 @@
 import Vue from "vue";
+
 Vue.config.productionTip = false;
 
 import Vuebar from "vuebar";

src/scss/styles.scss

@@ -99,19 +99,17 @@ a {
 .help-topic {
   display: flex;
   justify-content: flex-start;
-  flex-wrap: wrap;
 
   .help {
-    flex-grow: 1;
-    margin: 0;
-    margin-left: 6rem;
+    flex: 1 1 60%;
+    margin: 0 40px 0 6rem;
     .reading {
       margin-right: 0;
     }
   }
   .example {
     width: 300px;
-    flex: 0 0 auto;
+    flex: 0 1 30%;
     align-self: flex-start;
     margin: 0px 40px;
     padding: 20px 0;

src/store.layout.js

@@ -1,6 +1,11 @@
+import Vue from "vue";
+
+const scrolledParentSelector = ".app-content";
+Vue.prototype.$scrollToTop = () => scrolledParentSelector.scrollTo(0,0);
+
 export default {
   state: {
-    scrolledParentSelector: ".app-content",
+    scrolledParentSelector,
     sticky: true,
     footerVisible: 0,
     footerSentinelVisibleRatio: 0,
@@ -17,5 +22,14 @@ export default {
       state.footerVisible = visible;
       state.footerSentinelVisibleRatio = ratio;
     },
+    scrollToTop(state) {
+      this.commit("sticky", { value: true });
+      this.commit("updateFooter", { visible: false, ratio: 0 });
+      const el = document.querySelector(state.scrolledParentSelector);
+      el.scrollTop = 0;
+    },
+  },
+
+  actions: {
   },
 }

src/viewparts/SiteHeader.vue

@@ -66,7 +66,7 @@
 </template>
 
 <script>
-import { mapGetters } from "vuex";
+import { mapState, mapGetters } from "vuex";
 import viewport from "@/utils/viewport";
 
 import FontLoader from "@/components/FontLoader.vue";
@@ -89,7 +89,6 @@ export default {
   data() {
     return {
       textKinds,
-      sticky: true,
       aboveHeaderTransition: "slide-left",
       scrolledParent: null,
       stickyShowDelta: 200, // px
@@ -98,9 +97,10 @@ export default {
     };
   },
   computed: {
-    footerVisible() {
-      return this.$store.state.layout.footerVisible;
-    },
+    ...mapState({
+      sticky: state => state.layout.sticky,
+      footerVisible: state => state.layout.footerVisible,
+    }),
     ...mapGetters([
       "scrolledParentSelector",
       "customTextIds",
@@ -113,11 +113,6 @@ export default {
       return this.$route.params.text;
     },
   },
-  watch: {
-    sticky(value) {
-      this.$store.commit("sticky", { value });
-    },
-  },
   mounted() {
     // duct tape to avoid erroneous transition up/down when clicking a hash anchor
     window.addEventListener("resize", this.setAboveHeaderTransition);
@@ -126,6 +121,9 @@ export default {
     this.initStickyHeader();
   },
   methods: {
+    setSticky(value) {
+      this.$store.commit("sticky", { value });
+    },
     setAboveHeaderTransition() {
       this.aboveHeaderTransition = viewport.height < 500 ? "" : "slide-left";
     },
@@ -152,11 +150,11 @@ export default {
       const top = this.measureTop();
       const delta = top - this.lastTop;
       if (-delta > this.stickyShowDelta || top < 100) {
-        this.sticky = true;
+        this.setSticky(true);
         this.lastTop = top;
       }
       else if (delta > this.stickyHideDelta) {
-        this.sticky = false;
+        this.setSticky(false);
         this.lastTop = top;
       }
     },