Scroll to element / to top with animation

Aden23q

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

Fran Diox

@Aden23q The scrollable element is not the list, but the page’s content (.page__content). You can learn about that wrapper here.

Aden23q

@Fran-Diox Thanks so much!
I have solved the problem by following your link and adding .content to list container div.