auto scroll

Author: ITJesse

web/package-lock.json

@@ -19,6 +19,7 @@
     "vue": "^2.5.2",
     "vue-lazyload": "^1.1.4",
     "vue-router": "^3.0.1",
+    "vue-scrollto": "^2.8.0",
     "vuex": "^3.0.1"
   },
   "devDependencies": {

web/package.json

@@ -1,6 +1,6 @@
 <template>
   <router-link :to="`player/${uuid}`">
-    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 searchbox">
+    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 searchbox" :data-uuid="uuid">
       <div class="panel panel-default">
         <div class="panel-body">
           <div class="media">

web/src/components/PlayerBlock.vue

@@ -21,6 +21,7 @@
 <script>
 import axios from 'axios';
 import { mapState, mapMutations } from 'vuex';
+import VueScrollTo from 'vue-scrollto';
 
 import PlayerBlock from './PlayerBlock';
 import Footer from './Footer';
@@ -56,10 +57,12 @@ export default {
   },
   computed: mapState([
     'playerList',
+    'scrollOffset',
   ]),
   methods: {
     ...mapMutations([
       'setPlayerList',
+      'setScrollOffset',
     ]),
     lazyload() {
       clearTimeout(this.timer);
@@ -86,6 +89,27 @@ export default {
       });
     },
   },
+  beforeRouteLeave(to, from, next) {
+    const uuid = to.params.uuid;
+    this.setScrollOffset({
+      uuid,
+    });
+    next();
+  },
+  updated() {
+    this.$nextTick(function () {
+      if (this.scrollOffset.length === 32) {
+        setTimeout(() => {
+          VueScrollTo.scrollTo(`[data-uuid="${this.scrollOffset}"]`, 500, {
+            duration: 500,
+            easing: 'ease-in',
+            offset: -65,
+            cancelable: false,
+          });
+        }, 100);
+      }
+    });
+  },
   components: {
     playerblock: PlayerBlock,
     nyaaFooter: Footer,

web/src/components/PlayerList.vue

@@ -116,6 +116,9 @@ export default {
         clearInterval(timer);
       }
     }, 100);
+    this.$el.scrollTop = 0;
+  },
+  updated() {
   },
   components: {
     NameHistory,

web/src/components/PlayerPage.vue

@@ -5,6 +5,7 @@ import Vue from 'vue';
 import Vuex from 'vuex';
 import BootstrapVue from 'bootstrap-vue';
 import VueLazyload from 'vue-lazyload';
+import VueScrollTo from 'vue-scrollto';
 import 'bootstrap/dist/css/bootstrap.css';
 import 'bootstrap-vue/dist/bootstrap-vue.css';
 
@@ -17,6 +18,7 @@ Vue.use(BootstrapVue);
 Vue.use(VueLazyload, {
   lazyComponent: true,
 });
+Vue.use(VueScrollTo);
 Vue.use(Vuex);
 
 export const store = new Vuex.Store({
@@ -29,6 +31,7 @@ export const store = new Vuex.Store({
     },
     players: {},
     playerList: [],
+    scrollOffset: '',
   },
   mutations: {
     setInfo(state, payload) {
@@ -46,6 +49,9 @@ export const store = new Vuex.Store({
         ...payload.playerList,
       ];
     },
+    setScrollOffset(state, payload) {
+      state.scrollOffset = payload.uuid;
+    },
   },
 });