There are no tracking or monitoring cookies on this site. There are only cookies used for documentation examples related to cookies.Close
Processing...
This may take a few seconds.

scroll-into-view

Syntax

scroll-into-view: [true|false] [behaviour-auto|behaviour-smooth] [block-start|block-center|block-end|block-nearest] [inline-start|inline-center|inline-end|inline-nearest] [every (time)] [after (time)][, true...];

This command scrolls the target selector into view.

It uses the JavaScript scrollIntoView command, except it uses individual options to mimic the actions as it would if translated to CSS.

Note that behaviour-smooth doesn't work in all browsers. For cross-browser compatibility, additionally use the CSS property "scroll-behaviour" in your CSS.

To get a full description of the options and their behaviour, look at the page below:

https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView

Options

true = the same as writing "block-start inline-nearest".
false = the same as writing "block-end inline-nearest".

Below is the mapping equivalent to the JavaScript scrollIntoView action. Use the items in bold for your scroll-into-view command.

behaviour-auto = { behaviour: 'auto' } (default)
behaviour-smooth = { behaviour: 'smooth' } (This may or may not work in a specific browser - it depends on the browser.)
block-start = { block: 'start' } (default)
block-center = { block: 'center' }
block-end = { block: 'end' }
block-nearest = { block: 'nearest' }
inline-start = { inline: 'start' }
inline-center = { inline: 'center' }
inline-end = { inline: 'end' }
inline-nearest = { inline: 'nearest' } (default)

Example:

#myDiv:click {
    #anotherDiv {
        scroll-into-view: behaviour-smooth block-center;
    }
}

scroll-into-view

Click the button below to scroll the footer of this website into view

#scrollIntoViewButton:click {
    footer {
        scroll-into-view: true;
    }
}
<p>Click the button below to scroll the footer of this website into view</p>

<button id="scrollIntoViewButton">See the footer</button>