ScrollToOptions.top

The top property of the ScrollToOptions dictionary specifies the number of pixels along the Y axis to scroll the window or element.

Syntax

top: double

Value

A double.

Examples

In our scrolltooptions example (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 Module
The definition of 'top' in that specification.
Working Draft

Browser compatibility

DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
topChrome Full support 45Edge Full support 79Firefox Full support YesIE No support NoOpera Full support 32Safari Full support YesWebView Android Full support 45Chrome Android Full support 45Firefox Android Full support YesOpera Android Full support 32Safari iOS Full support YesSamsung Internet Android Full support 5.0

Legend

Full support
Full support
No support
No support

See also

ScrollToOptions