Add smooth scrolling

client/package.json

@@ -68,6 +68,7 @@
     "vue-axios": "^2.1.1",
     "vue-loader": "^14.2.1",
     "vue-router": "^3.0.1",
+    "vue-scrollto": "^2.11.0",
     "vue-style-loader": "^3.0.1",
     "vue-template-compiler": "^2.5.17",
     "vue-vimeo-player": "0.0.6",

client/src/components/modules/ModuleNavigation.vue

@@ -3,7 +3,7 @@
     <h3 class="module-navigation__heading">Inhalte: Modul 1</h3>
     <div class="module-navigation__anchors">
       <a href="#" class="module-navigation__anchor module-navigation__anchor--active">Einleitung</a>
-      <a href="#objectives" class="module-navigation__anchor">Lernziele</a>
+      <a href="#" v-scroll-to="'#objectives'" class="module-navigation__anchor">Lernziele</a>
       <a href="#" class="module-navigation__anchor">1.1 Lehrbeginn</a>
       <a href="#" class="module-navigation__anchor">1.2 Die drei Lernorte</a>
       <a href="#" class="module-navigation__anchor">Lernzielkontrolle</a>

client/src/main.js

@@ -8,6 +8,7 @@ import VueApollo from 'vue-apollo'
 import App from './App'
 import router from './router'
 import store from '@/store/index'
+import VueScrollTo from 'vue-scrollto';
 
 Vue.config.productionTip = false
 
@@ -36,6 +37,12 @@ Vue.use(VueApollo)
 Vue.use(VueAxios, axios)
 Vue.use(VueVimeoPlayer)
 
+Vue.use(VueScrollTo, {
+     duration: 500,
+     easing: 'ease-out',
+     offset: -50
+ })
+
 const apolloProvider = new VueApollo({
   defaultClient: apolloClient
 })