Search code examples
quasar

Is there a method within q-layout to scroll to top in quasar?

I have a q-layout (just a simple one as below) within a q-dialog where I need to scroll top of the page when a certain process is completed.

    <q-dialog v-model="is_form_dialog_open">
        <q-layout view="hhh LpR fff" container ref="scroll_area" id="top" style="max-height: 1200px: width: 1200px; max-width: 1200px;" class="bg-white shadow-3 rounded-borders">
            <q-header elevated class="bg-grey-3 text-black">
                <q-toolbar>
                    <q-toolbar-title> Add </q-toolbar-title>
                </q-toolbar>
            </q-header>
            <q-page-container class="row q-ma-sm">
                ...
            </q-page-container>
            <q-footer elevated class="bg-grey-2 text-white">
                <q-toolbar class="justify-end q-pa-sm q-gutter-sm">
                    <q-btn label="Test" @click="test()" color="primary" />  
                </q-toolbar>
            </q-footer>
        </q-layout>
    </q-dialog>

There is a component q-page-scroller easily scrolls to top of the layout but it uses a clicked. I need a way where I can trigger this (scroll to top) via method. Is there a method to scroll to the top of the q-layout?

Solution

  • yes there is a method:

    ...
methods: {
   GoToTop() {
       window.scrollTo(0, 0);
   },
...

    coupled to a button :

    <q-btn icon="open_in_browser" @click="GoToTop()" />