Jump to top of page when new item is loaded

[nadine]

Sorry for asking two questions within two days — hope this will be the last one!

I’m working on an experiment that involves having participants read rather long contexts. To make the text more comfortable to read, we made the lines rather short and the font large. As a consequence, the text doesn’t fit onto the screen and one has to scroll down.

The problem is that when a new item is loaded, the view doesn’t jump back to the top of the page. Sometimes it jumps up a little, but never all the way.

Is there a way to change this, i.e., to make sure that with each new item, participants will see the top of the page again?

Thank you,

-Nadine

[Jeremy]

Hi Nadine,

I must be missing something, because the view shouldn’t be able to scroll down at all, since normally new trials clear the content of the page and so there’s just no content overflowing vertically to make it possible to scroll down

Do you have a link to your project?

Jeremy

[nadine]

Hi Jeremy!

I think didn’t explain it well: a single item is already long enough to overflow vertically. So, to get to the end of the item, one has to scroll down. And then, when a new item is loaded, the view remains stuck at the bottom of the page.

Here’s a minimal example illustrating this: https://farm.pcibex.net/r/iUXcDZ/

Best,
Nadine

[Jeremy]

Hi Nadine,

I see, this happens when a new element gets added to the page: PennController tries to scroll down to make it visible, since otherwise when elements gets added under ones that already occupy the page’s full vertical viewport, participants might not notice that a vertical scrollbar just appeared and that an element now lies below the ones visible on the page

Anyway, just add newFunction( () => window.scrollTo(0,0) ).call() immediately after you print your Text element, that should do the trick

Jeremy

[nadine]

I see, that makes sense. And yes, that did do the trick. Thank you!

[Author]

Posts