Show button only when scroll bar descends, using vuetify

Asked

Viewed 151 times

1

Hello. I am creating a "go to the top of the page" button using vuetify. I can get him to the top with the following code:

@click="$vuetify.goTo(0,0)

But now I would like it only to appear if I scroll down a bit.

I tried that:

data() {
   topo: 0
}

methods: {
 sumir(){
   this.topo = window.pageYOffset || document.documentElement.scrollTop
 }
}

and then I did it in the boot:

:v-show ="topo > 100" ou  v-show ="topo > 100"

both unsuccessful. Could someone help?

vue.js vuetify

1 answer

1


I solved with the following code:

<template>

    <v-btn v-if="irParaTopo >= 200" color="info" dark fixed bottom right fab small
           @click="$vuetify.goTo(0,0)">
        <v-icon>expand_less</v-icon>
    </v-btn>

</template>

<script>

    export default {

        name: "IrParaOTopo",

        data() {
            return {

                irParaTopo: 0,
            }
        },

        mounted() {

            window.addEventListener("scroll", () => {
                var scrollAtual = document.documentElement.scrollTop;
                this.irParaTopo = scrollAtual;
            });

        },
    }

</script>

<style scoped>

</style>

Browser other questions tagged vue.js vuetify

You are not signed in. Login or sign up in order to post.