A Special Way to Use scrollIntoView()

The JavaScript scrollIntoView() function does just one thing: scroll to a certain point on the page so it's visible in the browser window. The function can be used in many different ways.

One of the ways I use scrollIntoView(), the method focused on in this article, is when the user taps to reveal new content in the web page and I need to immediately bring a specific part of the newly-revealed content into view.

When the new content is revealed, the function scrolls the browser window to the new content, then to a location within the content. The scroll location may be within the new content. Alternatively, the location may be at the top of the new content or at the bottom of the new content.

The function we are describing here requires an id value. It uses the id value to determine the location to scroll to.

The JavaScript code is

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

The id-value is replaced with the id value of the div or other HTML element to scroll to. (If the specified id value is not available on the page, no scrolling occurs.)

Here is an example of how to use scrollIntoView() for scrolling to a location within newly-revealed content.

→ When you tap this link, content is revealed. The browser scrolls to a point within the content.

As you'll notice when you tap the link to scroll to the top of the div, the top of the div ends up at the top of the browser window. That is, provided there is enough content below that point to allow a scroll to go up that far.

You'll notice contrary behavior when you tap to scroll to the bottom of the div. The bottom of the div ends up at the bottom of the browser window. Similar to before, provided there is enough content above that point to allow a scroll to go down that far.

Here is the source code for the above example. Notes and explanations follow.

<!-- The link -->
<a href="javascript:document.getElementById('example-div').style.display='block'; document.getElementById('spot-within-div').scrollIntoView()">LINK TO TAP</a>.
</p>

<!-- The content -->
<div id="example-div" style="display:none; border:3px solid #ccc; border-radius:.5em; padding:1em;">
<p>
Top of div.
</p>

<div style="height:1in;"><!--padding to gain height--></div>
<p id="spot-within-div">
&gt;&gt;&gt; When the div opens, the browser scrolls to this point.
</p>

<p>
<a href="javascript:document.getElementById('example-div').scrollIntoView()">Tap here</a> to scroll to the top of the div.
</p>
<p>
<a href="javascript:document.getElementById('example-div').scrollIntoView(false)">Tap here</a> to scroll to the bottom of the div.
</p>

<div style="height:1in;"><!--padding to gain height--></div>
<p>
Bottom of div.
</p>
</div>

Notes and explanations —

The link section:

The link is a JavaScript link. When tapped, it does two things.

1. The div with id value example-div is revealed.

2. The browser windows scrolls so the p with id value spot-within-div (within the example-div div) shows in the window.

The content section:

Within the example-div div are two links. One is to scroll the top of the div into view and the other is to scroll the bottom of the div into view.

Here is the JavaScript code for the two links.

document.getElementById('example-div').scrollIntoView()
document.getElementById('example-div').scrollIntoView(false)

To scroll to the top of the div, scrollIntoView() is used. To scroll to the bottom of the div, scrollIntoView(false) is used. The only difference between the two is the paramater false for scrolling to the bottom.

This article described how to reveal a div on a web page and then scroll the window to a specific spot within the newly-revealed div.

(There are numerous other ways the scrollIntoView() function can be used. The Willmaster library Scroll Into View article describes some of those.)

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

Will Bontrager