DOM Method scrollIntoView

Overview

In this shot, we will learn the DOM method. This method scrolls the web view to the desired element that is not visible in view (due to extended page height), and after applying it, it scrolls to that element that is visible in the view.

The scrollIntoView() is the DOM method that scrolls to that selected element when applied to it.

Code

Let’s write code to view the last element without scrolling:

Note: When we click the Scroll button, the view is directly jumped to the last p element using the method scrollIntoView().

Explanation

• Lines 5 to 8: We use a CSS style for the p element with id elem, defining the height, background color, and overflow.

• Lines 11-13: We use a CSS style for the p element with id inside, defining the height and background color.

• Line 19: We bind the change() method to the scroll button, which is called when it is clicked.

• Lines 23 to 25: We use a p element with id elem to set the height and background color. It makes the HTML page longer in height and, therefore, easy to understand.

• Line 27: We use another p element with id inside to set the height and background color. It is the last element, and we jump directly to it.

• Line 30: We define method change() in script tag.

• Line 31: We get and select the p element with id inside.

• Line 32: After we get the desired element, we apply the scrollIntoView() method, which directs the HTML page view to this element.