Кнопка возвращения

Всё у нас вроде бы красиво, но вот проматывать каждый раз страницу вверх после прочтения урока неудобно, добавим кнопку возвращения к началу страницы. Для этого нам потребуется в блок <v-app></v-app> добавить код отображения самой кнопки: 

<v-fab-transition>
    <v-btn
        v-show="scrolled"
        color="blue"
        @click="scrollToTop"
        dark
        fixed
        bottom
        right
        fab
    >
        <v-icon>keyboard_arrow_up</v-icon>
    </v-btn>
</v-fab-transition>

Как вы уже наверное заметили, кнопка у нас привязана к флагу отображения scrolled, это сделано для того чтобы она отображалась только когда требуется, соответственно вам надо добавить данный флаг в блок data скрипта и назначить ему значение false. Сделали? Теперь добавим отслеживание прокрутки и обработчик нажатия на кнопку - scrollToTop: 

created () {
    window.addEventListener('scroll', this.onScroll);
},

destroyed () {
    window.removeEventListener('scroll', this.onScroll);
},

methods: {
    onScroll () {
        this.scrolled = window.scrollY > 0;
    },

    scrollToTop () {
        window.scrollTo({
            top: 0,
            left: 0,
            behavior: 'smooth'
        });
    }
}

App.vue должен выглядеть следующим образом: 

<template>
    <v-app :dark="dark">
        <v-toolbar app>
            <v-toolbar-title class="headline text-uppercase">
                <span>Vue.js:</span>
                <span class="font-weight-light">Самоучитель</span>
            </v-toolbar-title>
            <v-spacer></v-spacer>
            <v-btn
                flat
                href="https://home.cainet.info:3000/cai/VueJS/"
                target="_blank"
            >
                <span class="mr-2">Актуальная версия</span>
            </v-btn>
            <v-menu bottom left>
                <template v-slot:activator="{ on }">
                    <v-btn
                        flat
                        icon
                        v-on="on"
                    >
                        <v-icon>more_vert</v-icon>
                    </v-btn>
                </template>

                <v-list>
                    <v-list-tile>
                        <v-list-tile-action>
                            <v-switch v-model="dark" color="blue"></v-switch>
                        </v-list-tile-action>
                        <v-list-tile-title>Тёмная схема</v-list-tile-title>
                    </v-list-tile>
                </v-list>
            </v-menu>
        </v-toolbar>

        <v-content>
            <v-container fluid fill-height grid-list-md>
                <v-layout row wrap full-height>
                    <v-flex sm4>
                        <TOC ref="TOC" />
                    </v-flex>
                    <v-flex sm8 v-html="text"></v-flex>
                </v-layout>
            </v-container>
        </v-content>
        <v-fab-transition>
            <v-btn
                v-show="scrolled"
                color="blue"
                @click="scrollToTop"
                dark
                fixed
                bottom
                right
                fab
            >
                <v-icon>keyboard_arrow_up</v-icon>
            </v-btn>
        </v-fab-transition>
        <LoadingDialog ref="LoadingDialog" />
        <MessageDialog ref="MessageDialog" />
    </v-app>
</template>

<script>
    import LoadingDialog from './components/LoadingDialog'
    import MessageDialog from './components/MessageDialog'
    import TOC from './components/TOC'

    export default {
        name: 'App',

        components: {
            LoadingDialog,
            MessageDialog,
            TOC
        },

        data () {
            return {
                dark: false,
                docId: 0,
                scrolled: false,
                text: ""
            }
        },

        mounted () {
            this.$refs.LoadingDialog.dialog = true;
            this.dark = localStorage.dark ? JSON.parse(localStorage.dark) : false;

            this.axios.get("data/start.html")
                .then(response => {
                    this.text = response.data;
                    this.$refs.LoadingDialog.dialog = false;
                })
                .catch(error => {
                    this.$refs.LoadingDialog.dialog = false;
                    console.log(error);
                    this.$refs.MessageDialog.title = "Ошибка";
                    this.$refs.MessageDialog.text = error;
                    this.$refs.MessageDialog.dialog = true;
                });

            this.$refs.LoadingDialog.dialog = true;

            this.axios.get("data/toc.json")
                .then(response => {
                    this.$refs.TOC.items = response.data;
                    this.$refs.LoadingDialog.dialog = false;
                })
                .catch(error => {
                    this.$refs.LoadingDialog.dialog = false;
                    console.log(error);
                    this.$refs.MessageDialog.title = "Ошибка";
                    this.$refs.MessageDialog.text = error;
                    this.$refs.MessageDialog.dialog = true;
                });

            this.$watch(
                "$refs.TOC.active",
                (newVal, oldVal) => {
                    if (newVal.length) {
                    this.$refs.LoadingDialog.dialog = true;
                    this.axios.get("data/id" + newVal + ".html")
                        .then(response => {
                            this.text = response.data;
                            this.$refs.LoadingDialog.dialog = false;
                        })
                        .catch(error => {
                            this.$refs.LoadingDialog.dialog = false;
                            console.log(error);
                            this.$refs.MessageDialog.title = "Ошибка";
                            this.$refs.MessageDialog.text = error;
                            this.$refs.MessageDialog.dialog = true;
                        });
                    }
                }
            );
        },

        watch: {
            dark (val) { localStorage.dark = val; }
        },

        created () {
            window.addEventListener('scroll', this.onScroll);
        },

        destroyed () {
            window.removeEventListener('scroll', this.onScroll);
        },

        methods: {
            onScroll () {
                this.scrolled = window.scrollY > 0;
            },

            scrollToTop () {
                window.scrollTo({
                    top: 0,
                    left: 0,
                    behavior: 'smooth'
                });
            }
        }
    }
</script>