#     
## 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: 

<!DOCTYPE html>
<html>
<head>
<style>
#elem {
  height: 250px;
  overflow: auto;
  background: green;
}

#inside {
  height: 800px;
  background-color: coral;
}
</style>
</head>
<body>

<button onclick="change()">Scroll</button>

<p >To auto direct the web view to the last element, click the button</p>

<p id="elem">
  FIRST BLOCK
</p>

<p id="inside">HELLO there?</p>

<script>
function change() {
  var elem = document.getElementById("inside");
  elem.scrollIntoView();
}
</script>

</body>
</html>


codemirror

> **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.

DOM Method scrollIntoView

Overview

Code

Explanation