- router scroll behaviour

src/App.vue

@@ -153,7 +153,7 @@ import App from "./app";
 export default App;
 </script>
 
-<style lang="scss">
+<style scoped lang="scss">
 // #app {
 //   font-family: Avenir, Helvetica, Arial, sans-serif;
 //   -webkit-font-smoothing: antialiased;

src/router/index.ts

@@ -60,6 +60,10 @@ const routes = [
 const router = createRouter({
     history: createWebHistory(),
     routes,
+    scrollBehavior(to, from, savedPosition) {
+        // return desired position
+        document.getElementById("app")?.scrollIntoView();
+    },
 });
 
 export default router;

src/views/home-view/home-view-component.vue

@@ -158,7 +158,8 @@
                     </p>
 
                     <div class="mx-auto my-5" style="width: 170px">
-                        <a class="button is-primary custom-button">
+                        <!-- <router-link to="/contact"><i class="far fa-id-card"></i> Contact</router-link> -->
+                        <a href="/contact" class="button is-primary custom-button">
                             <i class="fas fa-sign-in-alt"></i>
                             <strong>KONTAKT</strong>
                         </a>

src/views/map-view/help-view-component.vue

@@ -17,7 +17,7 @@
                     </div>
                     <div class="card-footer">
                         <p class="card-footer-item">
-                            <a class="button is-primary custom-button">
+                            <a href="/contact" class="button is-primary custom-button">
                                 <i class="fas fa-sign-in-alt"></i>
                                 <strong>KONTAKT</strong>
                             </a>
@@ -42,7 +42,7 @@
                     </div>
                     <div class="card-footer">
                         <p class="card-footer-item">
-                            <a class="button is-primary custom-button">
+                            <a href="/contact" class="button is-primary custom-button">
                                 <i class="fas fa-sign-in-alt"></i>
                                 <strong>KONTAKT</strong>
                             </a>
@@ -67,7 +67,7 @@
                     </div>
                     <div class="card-footer">
                         <p class="card-footer-item">
-                            <a class="button is-primary custom-button">
+                            <a href="/contact" class="button is-primary custom-button">
                                 <i class="fas fa-sign-in-alt"></i>
                                 <strong>KONTAKT</strong>
                             </a>