#42 scroll up button

components/ScrollButton.vue

@@ -0,0 +1,47 @@
+<template>
+    <div class="scroll-btn" @click.prevent="scroll" :style="`opacity: ${shown ? 1 : 0}`">
+        <SquareButton link="#" :colour="colour">
+            <Icon v="arrow-alt-up"/>
+        </SquareButton>
+    </div>
+</template>
+
+<script>
+    export default {
+        props: {
+            colour: { 'default': null },
+        },
+        data() {
+            return {
+                shown: false,
+            }
+        },
+        mounted() {
+            if (process.client) {
+                this.updateShown();
+                window.addEventListener('scroll', _ => { this.updateShown(); });
+            }
+        },
+        methods: {
+            scroll() {
+                document.body.scrollTop = 0;
+                document.querySelector('html').scrollTop = 0;
+            },
+            updateShown() {
+                const st = document.body.scrollTop || document.querySelector('html').scrollTop;
+                this.shown = st > 300;
+            }
+        },
+    }
+</script>
+
+<style lang="scss" scoped>
+    @import "assets/style";
+
+    .scroll-btn {
+        position: fixed;
+        bottom: $spacer;
+        right: $spacer;
+        transition: all .5s ease-in-out;
+    }
+</style>

pages/_.vue

@@ -116,6 +116,8 @@
             <About/>
             <Homepage align="center"/>
         </section>
+
+        <ScrollButton/>
     </div>
 </template>
 

pages/index.vue

@@ -251,6 +251,8 @@
                 </li>
             </ul>
         </section>
+
+        <ScrollButton/>
     </div>
 </template>
 

pages/literatura.vue

@@ -106,6 +106,8 @@
                 </li>
             </ul>
         </section>
+
+        <ScrollButton/>
     </div>
 </template>
 

pages/neutratywy.vue

@@ -229,6 +229,8 @@
         <Separator icon="plus" colour="nouns"/>
 
         <NounSubmitForm ref="form" :secret="secret"/>
+
+        <ScrollButton colour="#0F3974"/>
     </div>
 </template>