Enable Scroll to Top Animation on Slider

Overview

I am using Webflow’s Slider component to implement a 2-step form - Slide 1 contains Part 1 of the form, and Slide 2 contains Part 2 of the form.

The intended flow is:

  1. The user fills out Part 1 of the form (i.e. everything on Slide 1), scrolling down as needed to reveal form fields
  2. The user clicks the “next” button on Slide 1, taking them to Slide 2
  3. The user fills out Part 2 of the form (i.e. everything on Slide 2)
  4. The user clicks the “submit” button on Slide 2, completing and submitting the form successfully

Currently, for the transition between Slide 1 and Slide 2 (step 2 above), when the “next” button is clicked, the Slider navigates from Slide 1 to Slide 2 as expected, but retains the level of scrolling that was performed while filling out Part 1 of the form (step 1 above). What this means is that instead of the Slide 1Slide 2 transition taking the user to the top of Part 2 of the form, the transition just goes to Slide 2 and stays at the same place the user had scrolled to in Part 1, causing the user to need to scroll up manually in order to view the beginning of Part 2 of the form.

I am looking for a way to automatically have Slide 2 start at the very top after the transition from Slide 1Slide 2.

What I Have Tried

I tried to add an animation on Slide 2 that is triggered when Slide 2 comes into view. The animation moves Slide 2 up by 250px. This fix doesn’t work for me because 250px is being used as an approximation of how much the user would have had to scroll down in Slide 1 when filling out Part 1 of the form, instead of being a dynamic configuration to start at the top regardless of how much the user scrolled down in Slide 1. I tried replacing the 250px with other quantities and units, but those are all static values and hence don’t work for the same reason.

I am thinking I may need some sort of animation / transition that sets the y property of Slide 2 instead of a “move by xyz units” property.


Here is my public share link: LINK

Insert an element above the slider component and assign it an ID such as “Back_to_Top” for in-page linking. Connect the “Next Slide” arrow to this section, enabling the page to automatically scroll to the top when the “Next Slide” arrow is clicked.