Botao "ir para o topo"

Front-end
#1

Estou usando Vue, com vuetify, e criei um botão “ir para o topo” que fica no canto inferior dirieto, pareceido com o que há que site do vuetify.
O que não consegui foi fazer somente ele ficar visível quando a barra de rolagem descer um pouco. Ele esta todo tempo visível.
Alguém poderia me ajudar?

Aqui o botão:

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

<script>
    export default {
        name: "IrParaOTopo"
    }
</script>

<style scoped>

</style>
#2

Você pode usar o JavaScript para adicionar uma classe que vai deixar o botão visível.
No exemplo abaixo eu deixo visível apenas quando o scroll estiver a 300px do topo.

let btnScrollToTop =  $('.btn-scroll-to-top');

if ($(this).scrollTop() >= 300) { // 300px do topo
    btnScrollToTop.addClass('active');
}
else {
     if(btnScrollToTop.hasClass('active')) {
        btnScrollToTop.removeClass('active');
    }
}
#3

Agradeço muito a ajuda. Mas gostaria de algo em vuetify,


Não estou conseguindo usar dessa forma.

#4

Se ficar preso a frameworks, sempre vai passar por essas dificuldades para coisas que são tao simples via lib jquery ou até js puro mesmo.

1 curtida