Scroll to element / to top with animation
-
Hi,
I’m using Onsen UI and Vue.js (https://onsen.io/v2/guide/vue).
I have a<v-ons-list>
(https://onsen.io/v2/api/vue/v-ons-list.html) component and av-ons-fab
(https://onsen.io/v2/api/vue/v-ons-fab.html) button in my page and I would like to make view scroll to top (or to first element of list) when clicking floating button.
I have succeeded in doing it by using:document.getElementById('my_id').scrollIntoView();
but I would like to obtain an animated scroll-to-top effect.
I tried to use this plugin https://github.com/rigor789/vue-scrollto but I think it does not work for me.
Here is some ì code I have tried:
<template id="homepage"> <v-ons-page modifier="material"> <div id="container"> <v-ons-list-title>List</v-ons-list-title> <v-ons-list id="list"> <v-ons-list-item v-for="(item, index) in data" :key="item.ID" tappable modifier="material"> <div class="left"> <v-ons-icon fixed-width icon="ion-ios-home"></v-ons-icon> </div> <div class="center" > </div> <div class="right"> </div> </v-ons-list-item> </v-ons-list> </div> <v-ons-fab position="bottom right" @click="goToTop()"> <v-ons-icon icon="ion-ios-arrow-up"></v-ons-icon> </v-ons-fab> </v-ons-page> </template> <script> export default { name: 'home_page', data() { return { }; }, methods: { goToTop() { var options = { container: '#container', easing: 'ease-in', offset: -60, onDone: function () { // scrolling is done }, onCancel: function () { // scrolling has been interrupted }, x: false, y: true }; this.$scrollTo(document.getElementById('list'), 800, options); }, }, }; </script>
I scroll the list and click the
fab
button, but nothing happens.Hope you can help me!
Thanks
-
@Aden23q The scrollable element is not the list, but the page’s content (
.page__content
). You can learn about that wrapper here.
-
@Fran-Diox Thanks so much!
I have solved the problem by following your link and adding.content
to list container div.