cypress/docs/source/api/commands/_scrollto.md

title, comments

title	comments
scrollTo	false

Scroll to a specific position.

Syntax

cy.scrollTo(position)
cy.scrollTo(x, y)
cy.scrollTo(position, options)
cy.scrollTo(x, y, options)

Usage

cy.scrollTo() can be chained off of cy to scroll to a position in the window or chained off another cy command that yields a DOM element - limiting scrolling to it's yielded element.

cy.scrollTo(0, 500)                     // Scroll the window 500px down
cy.get('.sidebar').scrollTo('bottom')   // Scroll 'sidebar' to it's bottom

{% fa fa-exclamation-triangle red %} Invalid Usage

cy.title().scrollTo('My App')  // Errors, 'title' does not yield DOM element

Arguments

{% fa fa-angle-right %} position (String)

A specified position to scroll the window or element to. Valid positions are topLeft, top, topRight, left, center, right, bottomLeft, bottom, and bottomRight.

{% fa fa-angle-right %} x (Number, String)

The distance in pixels from window/element's left or percentage of the window/element's width to scroll to.

{% fa fa-angle-right %} y (Number, String)

The distance in pixels from window/element's top or percentage of the window/element's height to scroll to.

{% fa fa-angle-right %} options (Object)

Pass in an options object to change the default behavior of cy.scrollTo().

Option	Default	Notes
duration	0	Scrolls over the duration (in ms)
easing	swing	Will scroll with the easing animation
log	true	Whether to display command in Command Log
timeout	{% url defaultCommandTimeout configuration#Timeouts %}	Total time to retry the scroll

Yields

cy.scrollTo() yields the window or DOM element that was scrolled.

Timeout

cy.scrollTo() will wait until the window or element is in a 'scrollable' state for the duration of the {% url defaultCommandTimeout configuration#Timeouts %} or the duration of the timeout specified in the command's options.

Examples

Position

Scroll to the bottom of the window

cy.scrollTo('bottom')

Scroll to the center of the list

cy.get('#movies-list').scrollTo('center')

Coordinates

Scroll 500px down the list

cy.get('#infinite-scroll-list').scrollTo(0, 500)

Scroll the window 500px to the right

cy.scrollTo('500px')

Scroll 25% down the element's height

 cy.get('.user-photo').scrollTo('0%', '25%')

Options

Use linear easing animation to scroll

cy.get('.documentation').scrollTo('top', { easing: 'linear'} )

Scroll to the right over 2000ms

cy.get('#slider').scrollTo('right', { duration: 2000} )

Notes

Snapshots do not reflect scroll behavior

Cypress does not reflect the accurate scroll positions of any elements within snapshots. If you want to see the actual scrolling behavior in action, we recommend using {% url .pause() pause %} to walk through each command or {% url 'watching the video of the test run' taking-screenshots-and-recording-videos.html#Videos %}.

Command Log

Scroll to the bottom of the window then scroll the element to the "right"

cy.scrollTo('bottom')
cy.get('#scrollable-horizontal').scrollTo('right')

The commands above will display in the command log as:

When clicking on scrollTo within the command log, the console outputs the following:

See also

• {% url .scrollIntoView() scrollintoview %}