Notice: The Monaca & Onsen UI Community Forum is shutting down.

For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.

Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.

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.