Monaca Onsen UI Discord Chat Github Repo

Scroll to element / to top with animation

  • Hi,

    I’m using Onsen UI and Vue.js (
    I have a <v-ons-list> ( component and a v-ons-fab ( 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:


    but I would like to obtain an animated scroll-to-top effect.

    I tried to use this plugin 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 id="list">
    		  <v-ons-list-item v-for="(item, index) in data" 
    			<div class="left">
    			  <v-ons-icon fixed-width icon="ion-ios-home"></v-ons-icon>
    			<div class="center" >
    			<div class="right">
        <v-ons-fab position="bottom right"
          <v-ons-icon icon="ion-ios-arrow-up"></v-ons-icon>
      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);

    I scroll the list and click the fab button, but nothing happens.

    Hope you can help me!

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