HTML - DOM Element scrollIntoView() Method

Quiz

The HTML DOM Element scrollIntoView() method is used to ensure that a particular element on a webpage or within a scrollable container becomes visible by adjusting the scroll position.

This method accepts an options object or a boolean parameter that helps to adjust the scrolling behavior. Following are the object values that we can provide to this method:

Behavior − It defines the scrolling behavior. It can be auto (default) or smooth.
Block − It defines the vertical alignment of the scrolled element. It can be start, center, end, or nearest.
Inline − It defines the horizontal.

Syntax

Following is the syntax of the HTML DOM Element scrollIntoView() method −

element.scrollIntoView(Options);

Parameters

This method accepts a single parameter as listed below −

Parameter	Description
Options	Object that can be used to customize the scrolling behavior including options for smooth scrolling , vertical and horizontal alignment.

Return Value

This method does not return any value.

Example 1: Scroll to an Element with Custom Options

The following example demonstrates the usage of the HTML DOM Element scrollIntoView() method by ensuring that a specified element is scrolled into view −

<!DOCTYPE html>
<html lang="en">
<head>  
<style>
   .con {
      height: 200px;
      overflow-y: scroll;
   }
   .item {
      height: 200px;
      margin-bottom: 20px;
      background-color: lightblue;
   }
</style>
</head>
<body>
<h3>HTML DOM Element scrollIntoView() Method</h2>
<p>Scroll elements to view item3!!.</p>
<div class="con">
   <div class="item" id="item1">Item 1</div>
   <div class="item" id="item2">Item 2</div>
   <div class="item" id="item3">Item 3</div>
   <div class="item" id="item4">Item 4</div>
</div>
<button onclick="scrollToItem('item3')">Scroll to Item 3</button>
<script>
   function scrollToItem(id) {
      const its = document.getElementById(id);
      its.scrollIntoView({ behavior: 'smooth', block: 'center' });
   }
</script>
</body>
</html>

The above program displays a container with three pages (elements). When the user clicks the button, it scrolls the specified page into view.

Example 2: Scroll to Bottom of Page

Here is another example of the scrollIntoView() method. This method is used to ensure that a specified element is scrolled into view within a webpage or a scrollable container −

<!DOCTYPE html>
<html lang="en">
<head> 
<title>HTML DOM Element scrollIntoView</title>
</head>
<body>
<h3>HTML DOM Element scrollIntoView() Method</h3>
<p>Click the button below to scroll smoothly to the bottom of the page:</p>
<button onclick="scrollToBottom()">Scroll to Bottom</button>
<div style="height: 2000px;">Scroll up to see the button</div>
<script>
   function scrollToBottom() {      
      const be = document.body; 
      be.scrollIntoView
      ({behavior:'smooth', block:'end'});
   }
</script>
</body>
</html>

When the button is clicked, the page will scroll down smoothly to the end.

Example 3: Scroll Horizontally within a Container

In the example below, we use the scrollIntoView() method to scroll elements into view within a webpage or scrollable container. This program enables horizontal scrolling within the container −

<!DOCTYPE html>
<html lang="en">
<head>  
<style>
   .con {
      width: 300px;  
      white-space: nowrap;  
      overflow-x: scroll;  
   }
    .item {
      display: inline-block;
      width: 250px; 
      height: 150px;  
      margin-right: 20px;
      background-color: #f0b0ff;
   }
</style>
</head>
<body>
<h3>HTML DOM Elements scrollIntoView() Method</h3>
<p>Click Scroll elements to view item3!!.</p>
<div class="con" id="con">
   <div class="item" id="item1">Item 1</div>
   <div class="item" id="item2">Item 2</div>
   <div class="item" id="item3">Item 3</div>
   <div class="item" id="item4">Item 4</div>
   <div class="item" id="item5">Item 5</div>
</div><br>
<button onclick="scrollToItem('item3')">Scroll to Item 3</button>
<script>
   function scrollToItem(itemId) {
      const its = document.getElementById(itemId);
      its.scrollIntoView({behavior:'smooth',inline:'end',block:'nearest' });
   }
</script>
</body>
</html>

The above program displays a horizontally scrollable container. When the user clicks the button, it scrolls horizontally to the specified element position.

Supported Browsers

Method
scrollIntoView()	Yes	Yes	Yes	Yes	Yes

html_dom.htm

Print Page