Web/API/ScrollToOptions

The ScrollToOptions dictionary of the CSSOM View spec contains properties specifying where an element should be scrolled to, and whether the scrolling should be smooth.

A ScrollToOptions dictionary can be provided as a parameter for the following methods:

• Window.scroll()
• Window.scrollBy()
• Window.scrollTo()
• Element.scroll()
• Element.scrollBy()
• Element.scrollTo()

Properties

ScrollToOptions.top

Specifies the number of pixels along the Y axis to scroll the window or element.

ScrollToOptions.left

Specifies the number of pixels along the X axis to scroll the window or element.

ScrollToOptions.behavior

Specifies whether the scrolling should animate smoothly, or happen instantly in a single jump. This is actually defined on the ScrollOptions dictionary, which is implemented by ScrollToOptions.

Examples

In our scrolltooptions example ([[../../../../../../mdn.github.io/dom-examples/scrolltooptions/index|see it live]]) we include a form that allows the user to enter three values — two numbers representing the left and top properties (i.e. the positions to scroll to along the X and Y axes), and a checkbox indicating whether they want smooth scrolling enabled or not.

When the form is submitted, an event handler is run that puts the entered values into a ScrollToOptions dictionary, and then invokes the Window.ScrollTo() method, passing the dictionary as a parameter:

form.addEventListener('submit', (e) => {
  e.preventDefault();
  var scrollOptions = {
    left: leftInput.value,
    top: topInput.value,
    behavior: scrollInput.checked ? 'smooth' : 'auto'
  }

  window.scrollTo(scrollOptions);
});

Specifications

Specification	Status	Comment
CSS Object Model (CSSOM) View ModuleThe definition of 'ScrollToOptions' in that specification.	Working Draft

Browser compatibility

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
ScrollToOptions	Chrome Full support 45	Edge Full support 79	Firefox Full support Yes	IE No support No	Opera Full support 32	Safari Full support Yes	WebView Android Full support 45	Chrome Android Full support 45	Firefox Android Full support Yes	Opera Android Full support 32	Safari iOS Full support Yes	Samsung Internet Android Full support 5.0
behavior	Chrome Full support 45	Edge Full support 79	Firefox Full support Yes	IE No support No	Opera Full support 32	Safari Full support Yes Notes' Full support Yes Notes' Notes' Safari does not have support for the smooth scroll behavior.	WebView Android Full support 45	Chrome Android Full support 45	Firefox Android Full support Yes	Opera Android Full support 32	Safari iOS Full support Yes Notes' Full support Yes Notes' Notes' Safari does not have support for the smooth scroll behavior.	Samsung Internet Android Full support 5.0
left	Chrome Full support 45	Edge Full support 79	Firefox Full support Yes	IE No support No	Opera Full support 32	Safari Full support Yes	WebView Android Full support 45	Chrome Android Full support 45	Firefox Android Full support Yes	Opera Android Full support 32	Safari iOS Full support Yes	Samsung Internet Android Full support 5.0
top	Chrome Full support 45	Edge Full support 79	Firefox Full support Yes	IE No support No	Opera Full support 32	Safari Full support Yes	WebView Android Full support 45	Chrome Android Full support 45	Firefox Android Full support Yes	Opera Android Full support 32	Safari iOS Full support Yes	Samsung Internet Android Full support 5.0

Legend

Full support  

Full support

No support  

No support

See implementation notes.'

See implementation notes.

ScrollToOptions by Mozilla Contributors is licensed under CC-BY-SA 2.5.