scrollBehavior in vue-router, return back to looped data's position

Question

I have some problem about returning to same scroll position between pages. The thing is I am iterating a data

<template>
    <router-link class="type-atag" v-for="item in types" :key="item.id" :to="{name:'plan_detail', params:{pid:item.id}}">
       <ul class="flex align-ver align-hor column type-btn">
          <li class="btn-item">{{item.kind}} <span>{{item.menu}}</span></li>
          <li class="btn-item">{{item.type}}</li>
       </ul>
    </router-link>
</template>

User going into the detail page of clicked id. Then coming back to the main frame, again. But as you would, I don't want to show the top of the page again. So I tried to use vue-router's scrollBehavior() but there is a hash issue. Because I can't give #id of iterated data...

What is the best way to solve this problem? For example is there a way that I can scroll to item.id

you can try append a query that contains the itemId to the URL when click at one item. Whenever the main frame mounted, look for the query, extract the itemId and scroll to it if there is an item id. If using query a bit troublesome, can you vuex store/ local/session storage to store the last visited itemId — Jake Lam
okay, the problem is how can I scroll to item.id @NgocTuanLam — yvl

Jake Lam Jake Lam · Accepted Answer · 2020-05-19T09:06:47

if the item component already got the id, you can write a method to scroll and called it in mounted hook.

  goTo(id) {
          const position = document.getElementById(id).offsetTop;
          // smooth scroll
          window.scrollTo({ top: position, behavior: "smooth" });  
   }

if you are using vue Ref

goTo(id) {
          const position = this.$refs[id][0].$el.offsetTop;
          // smooth scroll
          window.scrollTo({ top: position, behavior: "smooth" });  
   }

scrollBehavior in vue-router, return back to looped data's position

1 Answers