list set scroll top to zero

[rashidnk]

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

[benoitranque]

Take a look at the scroll utils

[rashidnk]

@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

[benoitranque]

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

[rashidnk]

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

[benoitranque]

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

[steve]

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