Actualmente, estoy trabajando en las funciones del botón de desplazamiento a la parte superior.
El botón apareció cuando se puede desplazar hacia abajo. Quiero recordar la última posición cuando se hace clic en el botón de desplazamiento hacia arriba. Entonces, cuando el usuario haga clic en el botón de desplazamiento hacia abajo, volverá a la última posición.
¿Hay alguna idea mejor para recuperar la posición de desplazamiento actual?
ScrollToTopBottom.vue
<template> <div v-if="showScroll" 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> </template> <script> export default{ data () { return { isVisible: false, position: 0, hasVScroll: false, } }, methods: { onScroll () { this.isVisible = window.scrollY > 500 }, toTop () { this.position = window.scrollY window.scrollTo({ top: 0, left: 0, behavior: 'smooth' }) }, toBottom(){ let pos = this.position > 0 ? this.position : document.body.scrollHeight window.scrollTo({ top: pos, behavior: 'smooth' }) }, showScroll(){ this.hasVScroll = document.body.scrollHeight > document.body.clientHeight; } } } </script> </script>Puede guardar su posición al hacer clic en el botón superior y luego verificarla al hacer clic en la parte inferior:
Vue.component('scrollToTopButton', { template: ` <div v-scroll="onScroll" v-if="hasVerticalScroll"> <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, position: 0 } }, methods: { onScroll() { this.isVisible = window.scrollY > 50 }, toTop() { this.position = window.scrollY window.scrollTo({ top: 0, left: 0, behavior: 'smooth' }) }, toBottom(){ let pos = this.position > 0 ? this.position : document.body.scrollHeight window.scrollTo({ top: pos, behavior: 'smooth' }) }, }, computed: { hasVerticalScroll(){ return document.body.offsetHeight > window.innerHeight; } } }) 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>a</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>