NodeJS SPA, clicking an internal link doesn't move page scroll to top

Wappler General Bugs
1

Wappler 5.0.0
NodeJS + PostgreSQL
Firefox

Page A: very long page (e.g.: terms and conditions)
Page B: very long page (e.g.: privacy policy)

You’re in the end of page A, and you click an internal link to go to page B. The scroll position of page A is maintained instead of getting to the top, so the user has to manually scroll up.

When navigating between different pages, scroll should not be preserved (maybe add an exception for when the current link is equal to the next link, excluding different GET parameters)

2

Mind sharing a screenshot of the link & route page?

3

Sorry, it’s still a local project, but you can unzip this into any project of yours:
test.zip (7.0 KB)

And then go to /test/pageA and click the link to go to page B

4

I was asking for a screenshot of Wappler screen (routes & internal link prop) not the page itself.

I don’t have Wappler on this laptop.

5

I have never seen this as a bug to be honest. The idea is that the page is not loading. So it should preserve the state.
So we have browser1.scrollYTo(0) added to all our links. It does the job.

A use case for us to NOT scroll the page is when changing the language, we load another URL internally, and it just shows the new language’s data keeping the user in the same position.

If this is changed to scroll to top on each internal navigation, I would need some logic to keep the user in the same place for some cases. :sweat_smile:

6

Oh, my bad!

Screenshot
Screenshot712×1428 38.1 KB

<a href="/test/pageB" internal>Go to page B</a>

I haven’t touched the routes, they were generated by Wappler when I created the pages:

Screenshot 1
Screenshot 1706×570 27.7 KB

Screenshot 2
Screenshot 2700×132 2.88 KB

This is an interesting perspective :face_with_monocle:

Well, in that case, I suggest the Wappler team to add a configurable option to the main layout to select if it should scroll up by default or not, because I’m not sure if I like the idea of adding a scroll-to-top code on every link :rofl:

1 Like
7

I am not seeing anything out of place in those screenshot, maybe @sid can have a look at it.

8

Thanks Krish, no worries :slight_smile:

I’m following Sid’s suggestion of doing browser1.scrollYTo(0). Just need to remember to put that on some links :+1:

I’m now marking this bug report as “solved”. At most, this is now a feature request

2 Likes