Scroll Into View

JavaScript can be used to scroll a page until the content of an element is in the browser window.

The element is an HTML tag that may contain content, such as a div, p, pre, or other HTML tag. The HTML tag must have an id attribute with a unique value. Scrolling to the element means scrolling so the top of that element is visible in the browser window.

Such a scroll may be useful when a person has taken a specific action on a web page such as tapping on a specific link or submitting a form.

Here is example JavaScript code:

document.getElementById("id-value").scrollIntoView();

When that code runs, the browser will scroll the page until the top of the element is at the top of the browser window. The browser can also be told to scroll the page until the bottom of the element is at the bottom of the browser window.

(If there isn't enough page length to scroll to position, the browser will scroll only as far as it can.)

To provide a destination for all live examples in this article, its first paragraph has the id="id-value" attribute. You may tap here to see it in action.

Implementing Scroll-into-view Functionality

There needs to be an element for scrolling to. And an action that causes the scroll.

The element for scrolling to can be a div, p, pre, or other HTML tag. It needs an id attribute. The value of the id attribute is used by the JavaScript function to determine where to scroll to.

Here is the element for scrolling to used by this very article. The first paragraph has this HTML tag:

<p id="id-value">
[paragraph content]
</p>

The value of the id attribute is id-value and is the value that will be used in the JavaScript function when scrolling to that element.

Here is another working example for scrolling to the first paragraph of this article.

And here is the code for that example.

<div 
   onclick="document.getElementById('id-value').scrollIntoView();"
   style="display:table; margin:0 auto; padding:.5em; border:1px solid #666; border-radius:.25em;">
Tap to scroll.
</div>

When the div is tapped, the JavaScript of the onclick attribute is launched. The JavaScript scrolls the web page until the top of the id attribute with the id-value value is at the top of the browser window. (In this case, the first paragraph of this article.)

That is an entire implementation.

There are other things that can be done — scrolling the bottom of an element to the bottom of the browser window, for example. And there are additional ways to launch the JavaScript scrollIntoView() function.

Scroll to Bottom Instead of Top

To scroll the bottom of the element to the bottom of the browser window, provide the word false (no quotes) as the parameter to the scrollIntoView() function. Like this: scrollIntoView(false)

Here is a working example to scroll until the bottom of the first paragraph of this article is at the bottom of the browser window — assuming there is enough web page above the paragraph to scroll down that far.

And here is the code for that example.

<div 
   onclick="document.getElementById('id-value').scrollIntoView(false);"
   style="display:table; margin:0 auto; padding:.5em; border:1px solid #666; border-radius:.25em;">
Tap to scroll first paragraph to bottom of window.
</div>

As before, the first paragraph of this article has the id attribute with the id-value value. In this example, the false value was provided as a scrollIntoView(false) attribute. It is what directs the browser to scroll until the bottom of the element with id-value is at the bottom of the browser window.

Other Ways to launch scrollIntoView()

— Image Tap —
To launch scrollIntoView() when an image is tapped, the image on the right is an example. And here is the code.

<img 
  onclick="document.getElementById('id-value').scrollIntoView();" 
  src="https://www.willmaster.com/images/wmlogo_icon.gif" 
  alt="Image to tap">

— Link Tap —
To launch scrollIntoView() when a link is tapped, like the very first example in this article, you may tap here to see it in action. Here is the code for that.

<a 
  onclick="document.getElementById('id-value').scrollIntoView(); return false;" 
  href=".">
tap here to see it in action
</a>

Because the above is a link and we want to cancel any action the link's href attribute implies, return false; is appended to the statement that launches scrollIntoView().

— Button Tap —
Here is an additional technique — a button. Tapping scrolls to the first paragraph in this article. Below is the code.

<input 
  type="button" 
  onclick="document.getElementById('id-value').scrollIntoView();" 
  value="Scroll">

You are now equipped to make the browser window scroll to an element on the web page when the site visitor taps something specifically coded to launch the scroll.

The Element​.scroll​Into​View() page at Mozilla describes even more ways scroll​Into​View() can be used.

(This article first appeared with an issue of the Possibilities newsletter.)

Will Bontrager