# Cypress Documentation
# Source: https://raw.githubusercontent.com/cypress-io/cypress-documentation/main/docs/api/commands/scrollintoview.mdx
# Path: docs/api/commands/scrollintoview.mdx

---
title: 'scrollIntoView | Cypress Documentation'
description: Scroll an element into view in Cypress.
sidebar_label: scrollIntoView
---

<ProductHeading product="app" />

# scrollIntoView

Scroll an element into view.

It is [unsafe](/app/core-concepts/retry-ability#Only-queries-are-retried) to
chain further commands that rely on the subject after `.scrollIntoView()`.

## Syntax

```javascript
.scrollIntoView()
.scrollIntoView(options)
```

### Usage

<Icon name="check-circle" color="green" /> **Correct Usage**

```javascript
cy.get('footer').scrollIntoView() // Scrolls 'footer' into view
```

<Icon name="exclamation-triangle" color="red" /> **Incorrect Usage**

```javascript
cy.scrollIntoView('footer') // Errors, cannot be chained off 'cy'
cy.window().scrollIntoView() // Errors, 'window' does not yield DOM element
```

### Arguments

<Icon name="angle-right" /> **options _(Object)_**

Pass in an options object to change the default behavior of `.scrollIntoView()`.

| Option     | Default                                                           | Description                                                                         |
| ---------- | ----------------------------------------------------------------- | ----------------------------------------------------------------------------------- |
| `duration` | `0`                                                               | Scrolls over the duration (in ms)                                                   |
| `easing`   | `swing`                                                           | Will scroll with the easing animation                                               |
| `log`      | `true`                                                            | Displays the command in the [Command log](/app/core-concepts/open-mode#Command-Log) |
| `offset`   | `{top: 0, left: 0}`                                               | Amount to scroll after the element has been scrolled into view                      |
| `timeout`  | [`defaultCommandTimeout`](/app/references/configuration#Timeouts) | Time to wait for `.scrollIntoView()` to resolve before [timing out](#Timeouts)      |

<HeaderYields />

- `.scrollIntoView()` yields the same subject it was given.
- It is [unsafe](/app/core-concepts/retry-ability#Only-queries-are-retried)
  to chain further commands that rely on the subject after `.scrollIntoView()`.

## Examples

### Scrolling

```javascript
cy.get('button#checkout').scrollIntoView().should('be.visible')
```

### Options

#### Use linear easing animation to scroll

```javascript
cy.get('.next-page').scrollIntoView({ easing: 'linear' })
```

#### Scroll to element over 2000ms

```javascript
cy.get('footer').scrollIntoView({ duration: 2000 })
```

#### Scroll 150px below an element

```js
cy.get('#nav').scrollIntoView({ offset: { top: 150, left: 0 } })
```

## Notes

### Snapshots

#### 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 [`.pause()`](/api/commands/pause) to walk through each command
or
[watching the video of the test run](/app/guides/screenshots-and-videos#Videos).

## Rules

<HeaderRequirements />

- `.scrollIntoView()` requires being chained off a command that yields DOM
  element(s).

<HeaderAssertions />

- `.scrollIntoView()` will automatically wait for assertions you have chained to
  pass

<HeaderTimeouts />

- `.scrollIntoView()` can time out waiting for assertions you've added to pass.

## Command Log

**_Assert element is visible after scrolling it into view_**

```javascript
cy.get('#scroll-horizontal button').scrollIntoView().should('be.visible')
```

The commands above will display in the Command Log as:

<DocsImage
  src="/img/api/scrollintoview/command-log-for-scrollintoview.png"
  alt="command log scrollintoview"
/>

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

<DocsImage
  src="/img/api/scrollintoview/console-log-for-scrollintoview.png"
  alt="console.log scrollintoview"
/>

## See also

- [`cy.scrollTo()`](/api/commands/scrollto)