Estoy trabajando en el botón de desplazamiento hacia arriba y hacia abajo usando vuetify.
Actualmente, solo puedo desplazarme a la página inferior. Quiero que pueda desplazarse hasta la parte superior de la página cuando el usuario llegue al final de la página y viceversa.
Intento usar v-if y v-else pero parece que no funciona. ¿Alguna idea sobre cómo implementar el desplazamiento hacia arriba y hacia abajo en un solo botón?
ScrollToTopBottom.vue
<template> <div> <v-btn v-if = "!isVisible" v-scroll="onScroll" v-show="isVisible" fab fixed bottom right color="primary" @click="toBottom"> <v-icon>mdi-arrow-down-bold-box-outline</v-icon> </v-btn> <v-btn v-else v-scroll="onScroll" v-show="isVisible" fab fixed bottom right color="primary" @click="toTop"> <v-icon>mdi-arrow-up-bold-box-outline</v-icon> </v-btn> </div> </template> <script> export default{ data () { return { isVisible: false } }, methods: { onScroll () { this.isVisible = window.scrollY > 50 }, toTop () { window.scrollTo({ top: 0, left: 0, behavior: 'smooth' } ) }, toBottom(){ window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' }) } } } </script>Prueba como el siguiente fragmento:
Vue.component('scrollToTopButton', { template: ` <div v-scroll="onScroll"> <v-btn v-if="!isVisible" fab fixed bottom right color="primary" @click="toBottom"> <v-icon>mdi-arrow-down-bold-box-outline</v-icon> </v-btn> <v-btn v-else fab fixed bottom right color="primary" @click="toTop"> <v-icon>mdi-arrow-up-bold-box-outline</v-icon> </v-btn> </div> `, data () { return { isVisible: false } }, methods: { onScroll() { this.isVisible = window.scrollY > 50 }, toTop() { window.scrollTo({ top: 0, left: 0, behavior: 'smooth' }) }, toBottom(){ window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' }) } } }) new Vue({ el: "#demo", vuetify: new Vuetify(), }) <link href="https://cdn.jsdelivr.net/npm/@mdi/font@6.x/css/materialdesignicons.min.css" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script> <script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script> <div id="demo" > <v-app> <v-main> <v-container> <div>xxx</div><div>xxx</div><div>xxx</div><div>xxx</div><div>xxx</div><div>xxx</div><div>xxx</div><div>xxx</div><div>xxx</div><div>xxx</div><div>xxx</div><div>xxx</div><div>xxx</div><div>xxx</div><div>xxx</div><div>xxx</div><div>xxx</div><div>xxx</div><div>xxx</div><div>xxx</div><div>xxx</div><div>xxx</div><div>xxx</div><div>xxx</div><div>xxx</div><div>xxx</div><div>xxx</div><div>xxx</div><div>xxx</div><div>xxx</div> <scroll-to-top-button /> </v-container> </v-main> </v-app> </div>