Remember where the user was in the infinite list

[Gyurmatag]

Hey!

It's not really an issue but a discussion question, but I haven't found a discussion page in this repo. So I have a list of Course Cards in a v-for with this package. Here is it:

    <div v-for="course in courses" :key="course._id">
      <course-card
        :course-id="course._id"
        :title="course.title"
        :description="course.description"
        :city="course.city"
        :street-address="course.streetAddress"
        :price="course.price"
        :occasions="course.occasions"
        :date-from="course.dateFrom"
        :date-to="course.dateTo"
        :image-url="course.imageUrl"
        :max-group-size="course.maxGroupSize"
        :reservations="course.reservations"
        :is-on-details="false"
      />
    </div>
    <infinite-loading @infinite="load">
      <template #spinner>
        <div class="flex justify-center">
          <common-icon-loading-spin
            svg-class="h-10 w-10"
          ></common-icon-loading-spin>
        </div>
      </template>
      <template #complete>
        <span></span>
      </template>
    </infinite-loading>

In the detail page, I've got a normal back button with $router.back(), but I want to navigate the user back exactly where he/she was in the infinite list. Right now, it's navigating back the user to the top of the infinite list, even if the user was at the bottom of the list.

I'm using Nuxt3.

Can you please help me how to solve this issue?

Thank you very much!

Greetings, Gyuri

[oumoussa98]

This can be achieved using the Vue router's scrollBehavior In nuxt 3 you might need to customize the scroll behavior using router.options And use the useRouter API to load or save scroll position before each route if you need to