list set scroll top to zero

  • i have side menu list and main list in my quasar app, when i click an item from the side menu list , the list in main content is updated, the list is big and can be scrolled, ok. if i clicked item from side menu again i want to set the list scroll position to 0 , ie show the starting of the list, now after list is updated, it remains at the scroll position where i stop scrolling the previous list

  • Take a look at the scroll utils

  • @benoitranque , thank you for reply, I already seen that, but dont know how to use it in my app, i hope u will help

    in Home.vue

        <q-layout ref=“layout” view=“lHh Lpr fff” :left-class="{‘bg-white’: true}">
            <q-toolbar slot=“header” class=“bg-secondary glossy”>
                <q-btn flat @click="$refs.layout.toggleLeft()">
                    <q-icon name="menu" />
                    <!-- <div slot="subtitle">Running on Quasar1 v{{$q.version}}</div> -->
            <div slot="left">
                <sidemenu v-on:chaptClick="chaptClicked"></sidemenu>
            <ayas ref="ayas" v-bind:chapter="chaptSelected"></ayas>

    in ayas.vue

        <q-list no-border link inset-delimiter class="bg-yellow-1">
            <!-- <q-list-header class="uth"> {{}}</q-list-header> -->
            <q-item v-for="(aya, index) in">
                    <q-item-tile class="uthmani" label>{{aya.text}}</q-item-tile>
                    <q-item-tile class="manjari" sublabel>{{[index].text}}</q-item-tile>

    i want to reset the <q-list> scroll position to top each time the list is updated with new items.


  • If you want to scroll the whole window, use window.scrollTo(0, 0). If you need anything more complex, this stackoverflow question has useful answers

  • @benoitranque Thank you 😃 , this worked, i was trying to do this in quasar way,

  • No need to reinvent the wheel! Sometimes quasar makes you forget you still have all that other stuff at your disposal

  • I know this is old and maybe solved, but for others that want to so the Quasar way with smooth scrolling, you can do the following:

    Add a ref attribute on the element you want to scroll to:

    <q-list ref="list">

    In your <script> import and use the following:

    import { scroll } from 'quasar'
    const { getScrollTarget, setScrollPosition } = scroll

    Add a watcher on the q-list v-model or whatever is or is triggering the change:

    watch: { 
        '' () {
            setScrollPosition(getScrollTarget(this.$refs.list), 0, 250)

    In setScrollPosition, the parameters are:

    • The element to scroll into view
    • The offset from the top of the element
    • The animation duration in milliseconds

    From the docs

Log in to reply