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

    <template>
        <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" />
                </q-btn>
    
                <q-toolbar-title>
                    {{chaptSelected.ar.Chapter.ChapterName}}
                    <!-- <div slot="subtitle">Running on Quasar1 v{{$q.version}}</div> -->
                </q-toolbar-title>
            </q-toolbar>
    
            <div slot="left">
                <sidemenu v-on:chaptClick="chaptClicked"></sidemenu>
            </div>
    
            <ayas ref="ayas" v-bind:chapter="chaptSelected"></ayas>
        </q-layout>
    </template>
    
    

    in ayas.vue

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

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

    thanks



  • 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: { 
        'chapter.ar.Chapter.Verse' () {
            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