How to Scroll to an Element Using JavaScript

While surfing through the web pages, scrolling to an element keeps the user focused by grabbing their attention for a long period. This functionality can be applied when a user needs to scroll using a single click only or, in the case of automation testing, to check the added content at the bottom of the page instantly. In such scenarios, scrolling to an element in JavaScript adds functionality to be applied with a single click without much user interaction and saves time.

This manual will guide you to scroll to an element using JavaScript.

How to Scroll to an Element Using JavaScript?

To scroll to an element using JavaScript, you can utilize:

- “scrollIntoView()” method
- “scroll()” method
- “scrollTo()” method

The mentioned approaches will be illustrated one by one!

Method 1: Scroll to an Element in JavaScript Using scrollIntoView() Method

The “scrollIntoView()” method scrolls an element into the visible area of the Document Object Model(DOM). This method can be applied to get the specified HTML and apply the particular method to it with the help of the onclick event.

Syntax

element.scrollIntoView(align)

In the given syntax, “align” indicates the align type.

Example

In the following example, add the following heading using the “<h2>” tag:

<h2>Click the button to scroll to the element.</h2>

Now, create a button with an “onclick” event invoking the function “scrollElement():

<button onclick= "scrollElement()">Scroll Element</button>
<br>

After that, specify the image source and its id in order to be scrolled:

Lastly, define a function named “scrollElement()” which will fetch the required element using the “document.getElementById()” method and apply the scrollIntoView() method on it in order to scroll the image:

function scrollElement(){
var element = document.getElementById("div");
element.scrollIntoView();
}

CSS Code

In the CSS code, apply the following dimensions for adjusting the image size by referring to the image id “div”:

#div{
height: 800px;
width: 1200px;
overflow: auto;
}

The corresponding output will be:

Method 2: Scroll to an Element in JavaScript Using window.scroll() Method

The “window.scroll()” method scrolls the window according to the coordinate values in the document. This method can be implemented to fetch the image id, set its coordinates using a function, and scroll the specified image.

Syntax

window.scroll(x-coord, y-coord)

In the above syntax, “x-coord” refers to X coordinates, and “y-coord” indicates the Y coordinates.

The following example explains the stated concept.

Example

Repeat the same steps to add the heading, create a button, apply the onclick event and specify the image source with its id:

<h2>Click the button to scroll to the element.</h2>
<button onclick= "scrollElement()">Scroll Element</button>
<br>
<image src= "image.PNG" id= "div">

Next, define a function named “scrollElement()”. Here, we will adjust the coordinates using the “window.scroll()” method by accessing the function named “Position()” and applying it on the fetched image element:

function scrollElement(){
window.scroll(0, Position(document.getElementById("div")));
}

After that, define a function named “Position()” taking a variable obj as its argument. Also, apply the “offsetParent” property, which will access the nearest ancestor that does not have a static position and return it. Then, increment the initialized current top value with the help of the “offsetTop” property which will return the top position with respect to the parent(offsetParent) and return the value of “current top” when the added condition is evaluated as true:

function Position(obj){
var currenttop = 0;
if (obj.offsetParent){
do{
currenttop += obj.offsetTop;
}while ((obj = obj.offsetParent));
return [currenttop];
}
}

Lastly, style the created container according to your requirements:

#div{
height: 1000px;
width: 1000px;
overflow: auto;
}

Output

Method 3: Scroll to an Element in JavaScript Using scrollTo() Method

The “scrollTo()” method scrolls the specified document to assigned coordinates. This method can similarly be implemented to get the element by using its id and performing the required functionality to scroll the particular image on the DOM.

Syntax

window.scrollTo(x, y)

Here, “x” and “y” point to the x and y coordinates.

Have a look at the following example.

Example

First, repeat the steps discussed above for adding a heading, button with an onclick event, and image as follows:

<h2>Click the button to scroll to the element.</h2>
<button onclick= "scrollElement()">Scroll Element</button>
<br>
<img src= "image.JPG" id="div">

Next, define a function named “scrollElement()” and set the scroll by invoking Position() method in the scrollTo() method:

function scrollElement(){
window.scrollTo(0, Position(document.getElementById("div")));
}

Last, define a function named Position() and similarly apply the above discussed steps for setting the coordinates of the specified image:

function Position(obj){
var currenttop = 0;
if (obj.offsetParent){
do {
currenttop += obj.offsetTop;
}while ((obj = obj.offsetParent));
return [currenttop];
}
}

Output

We have discussed all the convenient methods to scroll to an element using JavaScript.

Conclusion

To scroll to an element in JavaScript, utilize the “scrollIntoView()” method to access the element and apply the specified functionality, the “window.scroll()” method to fetch the element, set its coordinates using a function, and scroll the image, or utilize the “scrollTo()” method in order to fetch the element and scroll it accordingly. This blog demonstrated the concept to scroll to an element using JavaScript.

How to Scroll to an Element Using JavaScript