Monaca Onsen UI Discord Chat Github Repo

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


  • Onsen UI

    @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.