Use scrollBehavior in Vue to keep the height when you click on the list, but how can you not be so stiff and add animation when you return?

the page is

clipboard.png1

2

clipboard.png (figure 2)

when I click back on the phone or click (figure 2) to return (figure 1), the height can return to the previous height, but paused and then suddenly reached the height where I just entered (figure 2). Can you add animation to make up for this problem, or return directly to the original height?
I am in router/index.js

    scrollBehavior (to, from, savedPosition) {
     if(savedPosition) {
        setTimeout(() => {
            window.scrollTo(savedPosition.x, savedPosition.y);
        }, 250)
    }else {
        return { x: 0, y: 0 }
      }
    }

how to solve this problem?

Aug.10,2021

.xx img{
    transition-duration:.3s;
}

the xx here is your picture selector

Menu