7 ways to scroll an element in JavaScript

Scrolling is a common interaction on the web that allows users to view different parts of a web page or an element. JavaScript provides various methods and properties to manipulate the scrolling behavior and position of the window or an element.

In this article, we will explore some of these methods and properties:

• scrollIntoView(): scrolls the element into the visible area of the browser window.
• scrollTo(): scrolls the window or an element to a particular set of coordinates.
• scroll(): similar to scrollTo(), but it can also scroll by relative distances.
• scrollBy(): scrolls the window or an element by a given amount.
• scrollTop: sets the number of pixels that an element’s content is scrolled vertically.
• scrollLeft: sets the number of pixels that an element’s content is scrolled horizontally.
• location.href: This property can be used to scroll to an element by setting it to an anchor URL that matches the element’s id. It can also be used to navigate to another website or protocol.

and some common use cases and examples of scrolling with JavaScript:

• To create a smooth scrolling effect when navigating to different sections of a web page.
• To create a back-to-top button that scrolls the window to the top of the page when clicked.
• To create a progress bar that shows how much a web page is scrolled vertically.
• To create a parallax effect that makes the background image move slower than the foreground content when scrolling.
• To trigger various actions when the user stops scrolling.

Using scrollIntoView() method

This is a method of Element interface that scrolls the element’s ancestor containers such that the element on which scrollIntoView() is called is visible to the user.

To use this method, you need to pass an element as the argument. For example, if you have an element with id “box”, you can do:

const element = document.getElementById("box");
element.scrollIntoView();

This will scroll the window to make the element with id “box” visible.

You can also pass an optional parameter to specify the alignment and smoothness of the scrolling. The parameter can be either a boolean value or an object with properties like behavior, block and inline.

If you pass a boolean value, it determines whether the top or the bottom of the element is aligned to the visible area of the scrollable ancestor. For example:

element.scrollIntoView(true); // aligns the top of the element to the top of the visible area
element.scrollIntoView(false); // aligns the bottom of the element to the bottom of the visible area

If you pass an object, you can customize the scrolling behavior and alignment more precisely. For example:

element.scrollIntoView({ behavior: "smooth", block: "end", inline: "nearest" });

This will scroll the window smoothly to align the end edge of the element to the end edge of the visible area in the block direction, and to align the nearest edge of the element to the nearest edge of the visible area in the inline direction.

Using scrollTo() method

The scrollTo() method is a method that scrolls the window or an element to a particular set of coordinates. This method can be called on the window object or the Element interface.

To use this method, you need to pass either two numbers or an object as the argument. The two numbers represent the horizontal and vertical positions, in pixels, that you want to scroll to. For example, if you want to scroll the window to the bottom right corner of the document, you can do:

window.scrollTo(window.innerWidth, window.innerHeight);

The object can have properties like top, left and behavior to customize the scrolling. The top and left properties specify the number of pixels along the Y and X axis to scroll the window or element. The behavior property determines whether scrolling is instant or animates smoothly. It can take one of the following values: “smooth”, “instant” or “auto”.

For example, if you want to scroll an element with id “box” to its center smoothly, you can do:

const element = document.getElementById("box");
element.scrollTo({ 
  top: element.clientHeight / 2, 
  left: element.clientWidth / 2, 
  behavior: "smooth" 
});

Using scroll() method

The scroll() method is a method that scrolls the window or an element to a particular position. This method can be called on the window object or the Element interface.

To use this method, you need to pass either two numbers or an object as the argument. The two numbers represent the horizontal and vertical positions, in pixels, that you want to scroll to. For example, if you want to scroll the window to the top left corner of the document, you can do:

window.scroll(0, 0);

The object can have properties like top, left and behavior to customize the scrolling. The top and left properties specify the number of pixels along the Y and X axis to scroll the window or element. The behavior property determines whether scrolling is instant or animates smoothly. It can take one of the following values: “smooth”, “instant” or “auto”. For example, if you want to scroll an element with id “box” to its center smoothly, you can do:

const element = document.getElementById("box");
element.scroll({ 
  top: element.clientHeight / 2, 
  left: element.clientWidth / 2, 
  behavior: "smooth" 
});

Using location.href property

The location.href property is a property of the Location interface that returns or sets the entire URL of the current page.

To use this property, you can either get or assign a value to it. The value can be an absolute URL, a relative URL, an anchor URL, or a new protocol. For example, if you want to get the URL of the current page, you can do:

const url = location.href;

If you want to set the URL of the current page to another website, you can do:

location.href = "https://byby.dev";

If you want to use location.href to scroll to an element, you need to have an element with an id attribute that matches the anchor URL. For example, if you have an element with id “footer”, you can do:

location.href = "#footer";

This will scroll the window to the element with id “footer”.

Using scrollBy() method

The scrollBy() method is a method that scrolls the window or an element by a given amount. This method can be called on the window object or the Element interface.

To use this method, you need to pass either two numbers or an object as the argument. The two numbers represent the horizontal and vertical distances, in pixels, that you want to scroll by. For example, if you want to scroll the window down by 100 pixels, you can do:

window.scrollBy(0, 100);

The object can have properties like top, left and behavior to customize the scrolling. The top and left properties specify the number of pixels along the Y and X axis to scroll the window or element by. The behavior property determines whether scrolling is instant or animates smoothly. It can take one of the following values: “smooth”, “instant” or “auto”.

For example, if you want to scroll an element with id “box” by 50 pixels in both directions smoothly, you can do:

const element = document.getElementById("box");
element.scrollBy({ top: 50, left: 50, behavior: "smooth" });

Using scrollTop property

The scrollTop property is a property of the Element interface that gets or sets the number of pixels that an element’s content is scrolled vertically.

To use this property, you can either get or assign a value to it. The value is a number that represents the distance from the element’s top to its topmost visible content. If the element’s content does not generate a vertical scrollbar, then its scrollTop value is 0. If the value is negative, it is set to 0. If the value is greater than the maximum allowed, it is set to the maximum.

For example, if you want to get the scrollTop value of an element with id “box”, you can do:

const element = document.getElementById("box");
const y = element.scrollTop;

If you want to set the scrollTop value of an element with id “box” to 100 pixels, you can do:

const element = document.getElementById("box");
element.scrollTop = 100;

Using scrollLeft property

The scrollLeft property is a property of the Element interface that gets or sets the number of pixels that an element’s content is scrolled from its left edge.

To use this property, you can either get or assign a value to it. The value is a number that represents the distance from the element’s left edge to its leftmost visible content. If the element’s content does not generate a horizontal scrollbar, then its scrollLeft value is 0. If the value is negative, it is set to 0. If the value is greater than the maximum allowed, it is set to the maximum.

For example, if you want to get the scrollLeft value of an element with id “box”, you can do:

const element = document.getElementById("box");
const x = element.scrollLeft;

If you want to set the scrollLeft value of an element with id “box” to 100 pixels, you can do:

const element = document.getElementById("box");
element.scrollLeft = 100;

You can also use this property to scroll an element by a relative amount. For example, if you want to scroll an element with id “box” by 50 pixels to the right, you can do:

const element = document.getElementById("box");
element.scrollLeft += 50;