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.


Log in to reply