Merge pull request #364 from nusjzx/310-autoscroll-after-page-loaded

Autoscroll after the whole page is loaded

If the user navigates to 'index.html#some-heading', by default, the
browser will automatically scroll to the correct HTML header with
'some-heading' as its ID.

However, there is a race condition between the scrolling by the browser,
and the loading of components by Vue. Vue might take a long time to load
the components, so if the browser scrolls too early, then when the
components are fully loaded, the page appearance would have changed, and
the position is no longer accurate.

Let's force the browser to scroll again after Vue finishes loading,
by hooking Vue's 'mounted' lifecycle, and manually scrolling to the
anchor using jQuery inside the hook.

asset/js/setup.js

@@ -2,6 +2,12 @@
 
 Vue.use(VueStrap);
 
+function scrollToUrlAnchorHeading() {
+  if (window.location.hash) {
+    jQuery(window.location.hash)[0].scrollIntoView();
+  }
+}
+
 function setupSiteNav() {
   // Add event listener for site-nav-btn to toggle itself and site navigation elements.
   const siteNavBtn = document.getElementById('site-nav-btn');
@@ -29,6 +35,9 @@ function setup() {
   // eslint-disable-next-line no-unused-vars
   const vm = new Vue({
     el: '#app',
+    mounted() {
+      scrollToUrlAnchorHeading();
+    },
   });
   setupSiteNav();
 }
@@ -53,6 +62,9 @@ function setupWithSearch(siteData) {
         window.location = `${page}${anchor}`;
       },
     },
+    mounted() {
+      scrollToUrlAnchorHeading();
+    },
   });
   setupSiteNav();
 }