How do I get my scrollbar to reset its position when I move to a new page?

[sophief10]

Hello everyone,

I am building an experiment in jsPsych 7.1, and would like to use the Instructions plugin. However, when I move from one page of instructions to another, my vertical scrollbar does not reset to the top of the page. I have attached a series of screenshots to help visualize this problem:
Screenshots (2).pdf

Here is the code corresponding to my experiment:

instructions.pages = function() {
  return ["<h1>Experimental Task</h1><p>...</p>" +
  "<div style='width:80vw; height:50vh; padding:1.5rem;'>" +
    table() // a function that will render a table 
  "</div>" +
  "<p>...</p>" +
  "<div style='width:80vw; height:50vh; padding:1.5rem;'>" +
      table()  
  "</div>" +
  "<p>...</p>",
  "<h2>Rating Money Transfers</h2><p>...</p>" +
  "<div style='width:80vw; height:auto; padding:1.5rem;'>" +
      table() + "<br><br>" + transfer // a global variable that will render a set of radio buttons
  "</div>" +
  "<p>...</p>"];
}

I am unsure where the bugs are in the above code.

Does anyone know how I can fix the position of my scrollbar?

[jodeleeuw]

Hey @woodenchair,

I think you can use window.scrollTo(0,0) to reset the scrolling. MDN docs.

You could add this to the plugin code inside the show_current_page() function so that the scrolling resets whenever the page changes.