Scrolling is a proprietary extensions to the DOM which was framed when HTML5 specifications did not exist in this area.

The HTMLElement type has the following methods as an extension to help in scrolling the document as needed. HTML5 standards has scrollIntoView() method for this purpose, but several additional methods were added by individual browsers to meet more finer needs.

scrollIntoViewIfNeeded()

The scrollIntoViewIfNeeded() method scrolls the browser's window, so that element is visible if it is not already visible before. The optional alignCenter argument will try to place the element in the center of the view. 

In the syntax below "notifyDiv" element will be scrolled into the view if it is not already in the viewable area.

Syntax for scrollIntoViewIfNeeded() method

var notifyDiv = document.getElementById("ErrorNotificationDiv");

notifyDiv.scrollIntoViewIfNeeded(alignCenter);

scrollByLines()

The scrollByLines​() method scrolls the document by the given number of lines. The number of lines is passed as an argument to method which is the number lines to scroll by. Lines can be a positive or a negative number.

Syntax for scrollByLines() method

<!-- scroll down the document by 10 lines. -->

<button onclick="scrollByLines(10);">Scroll down</button>

<!-- scroll up the document by 10 lines. -->

<button onclick="scrollByLines(-10);">Scroll up</button>

scrollByPages()

The scrollByPages() method scrolls the current document by the specified number of pages. The pages are passed as an argument. The pages can also be a positive or a negative number.

Syntax for scrollByPages() method

// scroll down the document by 3 page

window.scrollByPages(3);

// scroll up the document by 3 page

window.scrollByPages(-3);

scrollIntoView()

The scrollIntoView() method scrolls the current element into the visible area of the browser window. This is the only method supported by all browsers as this is specified in HTML5 specifications. If the alignToTop argument is true, the top of the element will be aligned to the top of the visible area of the scrollable ancestor. If false, the bottom of the element will be aligned to the bottom of the visible area of the scrollable ancestor.

Syntax for scrollIntoView() method

var element = document.getElementById("submitButton"),

element.scrollIntoView(false);

The scrollIntoView() method is useful for immediately showing the user the result of some action without requiring the user to manually scroll through the document to find the result.Depending on the size of the given object and the current window, this method might not be able to put the item at the very top or very bottom, but will position the object as close to the requested position as possible.

This example below shows that the document can be scrolled to get the bottom visible area or top visible area using the scrollIntoView() method. The changes are clearer when the size of the paragraph is large.

Example of scrollIntoView() method for document's scrolling top or bottom

 

›› go to examples ››