ScrollToComponent Command

Scroll forward or backward through a ScrollView, Sequence, or GridSequence to display a specified component.


The ScrollToComponent command has the properties shown in the following table, in addition to the common command properties. Set the type property to ScrollToComponent.

In the following table, the "Default" column shows "Required" for properties that must have a value for the command to run. Otherwise it displays the default value, which might be none.

Property Type Default Description


first, center, last, visible


The alignment of the item after scrolling




The child component to move into view.


Non-negative Integer

System default

Target duration of the scrolling animation (in milliseconds).

For example, the following command scrolls until the component with the ID recipeSteps is in view.

  "type": "ScrollToComponent",
  "componentId": "recipeSteps",
  "align": "center"

The ScrollToComponent command looks for the first Sequence or ScrollView at or before the componentId and scrolls that one.

Scrolling stops if the user touches the screen. Stopping the command stops scrolling immediately.

The ScrollToComponent command is ignored in fast mode.


The alignment of the item on the screen after scrolling and before speech. Alignment is an enumerated value with options shown in the following table.

Alignment Description


The top/left side of the item is placed at the top/left side of the scrolling container.


The center of the item is placed in the center of the container.


The bottom/right side of the item is placed at the bottom/right side of the scrolling container.


The item is moved the minimal distance necessary to bring it fully into view.


A selector that identifies the target component for the command. When not provided, defaults to :source. The :source selector targets the component that issued the ScrollToComponent command.


Target duration of the scrolling animation in milliseconds. The command attempts to take the specified amount of time to scroll, but might differ based on the runtime. When you don't specify the targetDuration, the command uses the runtime-defined duration. Set the targetDuration to zero to jump to the scroll position immediately.

Reinflation strategy

When the Reinflate command runs, the ScrollToComponent command can resume after Alexa reinflates the document. The command resumes when it runs on a sequencer specified in the preservedSequencers array on Reinflate. The command saves the target component and the alignment specified in the align property.

If the target component isn't in the reinflated hierarchy or isn't a descendant of a scrollable component, the command is ignored.

When Alexa reinflates the document, scrolling resumes and scrolls the target component into position as specified by align.

ScrollToComponent example

The following example shows a Sequence that displays a long list of items. The list of items includes both the color items and section headings that correspond to a range of the alphabet. Each section heading has a component ID. For example, the "N-R" section has the ID "n-r". The TouchWrapper components displayed next to the list use the ScrollToComponent to scroll to the specified section in the list.

Was this page helpful?

Last updated: frontmatter-missing