Allow setting of scroll position based on browser history state.

kolibri/core/assets/src/router.js

@@ -1,5 +1,6 @@
 import VueRouter from 'vue-router';
 import logger from 'kolibri.lib.logging';
+import store from 'kolibri.coreVue.vuex.store';
 
 const logging = logger.getLogger(__filename);
 
@@ -14,11 +15,14 @@ class Router {
   constructor() {
     this._vueRouter = new VueRouter({
       scrollBehavior(to, from, savedPosition) {
+        let y = 0;
         if (savedPosition) {
-          return savedPosition;
-        } else {
-          return { x: 0, y: 0 };
+          y = savedPosition.y;
         }
+        // Set the scroll position in the vuex store
+        // CoreBase is watching for this value to change
+        // to set its initial scroll position.
+        store.commit('SET_SCROLL_POSITION', y);
       },
     });
     this._actions = {};

kolibri/core/assets/src/state/modules/core/index.js

@@ -16,6 +16,7 @@ export default {
     loginError: null,
     signInBusy: false,
     totalProgress: null,
+    scrollPosition: 0,
     notifications: [],
     channels: {
       list: [],

kolibri/core/assets/src/state/modules/core/mutations.js

@@ -40,4 +40,7 @@ export default {
   CORE_REMOVE_NOTIFICATION(state, notification_id) {
     state.notifications = state.notifications.filter(obj => obj.id !== notification_id);
   },
+  SET_SCROLL_POSITION(state, scrollPosition) {
+    state.scrollPosition = scrollPosition;
+  },
 };

kolibri/core/assets/src/views/CoreBase/index.vue

@@ -244,6 +244,7 @@
         blockDoubleClicks: state => state.core.blockDoubleClicks,
         busy: state => state.core.signInBusy,
         notifications: state => state.core.notifications,
+        startingScroll: state => state.core.scrollPosition,
       }),
       headerHeight() {
         return this.windowIsSmall ? 56 : 64;
@@ -333,9 +334,22 @@
         return '';
       },
     },
+    mounted() {
+      // Set a one time watcher so that if the router sets a new
+      // starting scroll position based on the history, then it gets
+      // set here.
+      const unwatch = this.$watch('startingScroll', () => {
+        unwatch();
+        this.$el.scrollTop = this.startingScroll;
+      });
+    },
     methods: {
       handleScroll(e) {
         this.scrollPosition = e.target.scrollTop;
+        // Setting this will not affect the page layout,
+        // but this will then get properly stored in the
+        // browser history.
+        window.pageYOffset = this.scrollPosition;
       },
       dismissUpdateModal() {
         if (this.notifications.length === 0) {