All Collections
Using Editor
Adding actions and interactivity
Using the Scroll Containers and Scroll to Widget Actions
Using the Scroll Containers and Scroll to Widget Actions
Learn how to scroll containers and scroll to a widget using Actions
Kirsten Stevens avatar
Written by Kirsten Stevens
Updated over a week ago

You can scroll through containers and scroll to specific widgets using actions. The Scroll Containers Action allows you to scroll any container/section on the screen. You can scroll to or by any pixel or percentage value. The Scroll to Widget Action allows you to scroll to a specific widget on the screen. Review the video below to see an example of the action being built in Editor.

To add a Scroll Container action to a widget in Editor:

  1. Select the widget that will be the source for the interaction, e.g. the 'Back to Top' button.

  2. Open the Actions panel.

  3. Click the Add Action button.
    Note: You can also right click the widget and select Add Action from the menu

  4. Select the desired trigger, for example 'Click' and the desired action, 'Scroll Containers' and click the Next button.

  5. Click the Select widgets button, which will put the cursor in a 'targeting' mode that allows you to pick the widget(s) for which you want to scroll.
    Note: It is important to name the widgets so that you know which widgets you will be editing in the panel. Additionally, for the Scroll Container action it is important that your container already have active scrolls. 

  6. Select target widget(s) by clicking the widget(s) on the screen or by clicking on the widget name(s) in the Outline panel.  
    Note: The action dialog is draggable, if you need to move it to see the full Outline panel.

  7. Select whether you want to Scroll by a number of pixels, or Scroll to a specific location, then type in either the value you wish to scroll by, or the coordinates for the location you want to scroll to. 

  8. Optionally add a delay and click the Done button. 

To add a Scroll to Widget action to a widget in Editor:

  1. Select the widget that will be the source for the interaction, e.g. the 'Back to Top' button.

  2. Open the Actions panel.

  3. Click the Add Action button.
    Note:     You can also right click the widget and select Add Action from the menu

  4. Select the desired trigger, for example 'Click' and the desired action, 'Scroll to Widget' and click the Next button.

  5. Click the Select one widget button, which will put the cursor in a 'targeting' mode that allows you to pick the single widget to scroll to.
    Note:     It is important to name the widgets so that you know which widgets you will be editing in the panel.

  6. Select target widget by clicking the widget on the screen or by clicking on the widget name in the Outline panel.  
    Note    : The action dialog is draggable, if you need to move it to see the full Outline panel.

  7. Optionally add a delay and click the Done button. 

Did this answer your question?