After the first scroll, it always scrolls from top

[elvismelkic]

trafficstars

I have a page layout like this

---NAV--- ---HEADER--- ---LIST OF 10 ELEMENTS--- ---DETAILS OF EACH ELEMENT--- ---FOOTER---

I made the functionality so that when I click on one of the 10 elements, it scrolls down to details of said element. For the first scroll it works as it should, I click on the element, and it scrolls from the current position down to details of said element. But when I go back up to the list (not to the top of the page) and then click on some element (the same one or some other, it doesn't matter), it goes to the top of the page instantly, and then scrolls down to the details.

I solved it by setting the container to be html element, but maybe the default functionality is not as intended, so I'm opening this issue. Also, I wasn't able to find this issue addressed somewhere else.

[rigor789]

Are you scrolling a different container? Can you share a reproduction (jsfiddle, codesandbox, etc.) that shows this behavior?

[imanbee]

Hi! I have similar behaviour, but with some differences. Page layout is

---NAV--- ---BLOCK1--- ---BLOCK2--- ---BLOCK3--- ---FOOTER---

and in FOOTER I have links for each BLOCK. First click on the link from FOOTER get me to the top of the page, and then scrolls smoothly to needed BLOCK (page URL now contains hash with BLOCK id) and it's not ok. Then if I will click second time on the same link, it will scroll up to the needed block, without getting to top first, which is desired behaviour.

My container is set as "body". I will try to attach reproduction soon.

[elvismelkic]

I tried to make some JSFiddle, but I wasn't able to reproduce the error, everything worked fine. Maybe the problem is with Nuxt, since we are using it for our page.

The fix was to set ['vue-scrollto/nuxt', { duration: 800, container: 'html' }] in nuxt.config.js file.

I'm sorry I'm not able to give you something more to work with.