1

Olá. Estou criando um botão "vá para o topo da página", usando vuetify. Já consigo fazer ele ir ao topo com o seguinte código:

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

Mas agora eu gostaria que ele somente aparecesse se eu rolar um pouco a página para baixo.

Tentei isso:

data() {
   topo: 0
}

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

e depois fiz no botao:

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

ambos sem sucesso. Alguém poderia ajudar?

1 Resposta 1

1

Resolvi com o seguinte código:

<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>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .