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

MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1eb7594-264f.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1eb7594-264f.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?