Anchor Link for a Div
When a page loads with a valid anchor name, the window scrolls to that position. I'll show you how to scroll a div to a specific spot instead of the window.
This article was inspired by a request received via the "was it helpful?" form at the end of every Willmaster Library article.
There are two differences between a div-scroll-position anchor and a web page-scroll-position anchor that you'll want to know about.
Web Page and Div Position Anchor Differences
Difference 1
Difference 1
Both anchors look similar, but function differently. A web page anchor might be http://example.com/#page-position and a div anchor might be http://example.com/#div-id,200
Anchor #page-position scrolls the web page to the HTML element with an id="page-position" attribute — if the id value exists; otherwise, it doesn't scroll the web page at all.
Anchor #div-id,200 scrolls the div with an id="div-id" element 200 pixels down from the top — if the id value exists; otherwise, it doesn't scroll any div at all. The div scrolling requires JavaScript.
Difference 2
And that's a significant difference. The div position anchor requires JavaScript to integrate the functionality.
Therefore, because the JavaScript runs when the web page is loaded, the div will scroll only at that time — when the page is loaded or reloaded. Unlike web page anchors, the div will not scroll by clicking links within the document containing the div.
(If the links were constructed differently, the div could scroll via same-document links. But it would add complexity and I'm going to keep this article as simple as I can make it.)
How the Div Anchor Link Works
For comparison, web page anchors generally work like this:
The anchor is a string of characters beginning with a hash mark (#) that's part of the URL. The string of characters represent a position marked in the document, generally an HTML element with an id value equal to the anchor (minus the hash mark).
When the web page loads, its scrolls to the position marked with that specific string of characters (the HTML element with the matching id value). The web page will scroll to a new position if a link with a different anchor in the document is clicked. (See the the on-page bookmarking article for more information about web page anchors and how to use them.)
Div anchors, as described in this article, work like this:
Just like the hash mark for scrolling to a web page position, a string of characters following # is part of the URL. In this case, the string of characters represent both the id value of a div and the pixel position to scroll the div.
The hash value (the characters in the URL following #) has two parts, separated with a comma. The first part is the id value of the div to scroll. The second part is the number of pixels to scroll.
When the web page loads or reloads, the div is vertically scrolled by the specified number of pixels.
If no div with the specified id value exists, no div gets scrolled. If the div to be scrolled has less height than the specified number of pixels, the scroll will be to the bottom of the div.
The div position anchor code does not interfere with the web page position anchor.
Demonstration
The demonstration is on a separate page (link follows). The hash value is scroll-example,200
When you click the demonstration link, your browser will be taken to a page with a div containing the id="scroll-example" attribute. And the div will be scrolled down 200 pixels.
As indicated, the div scrolling requires JavaScript. The source code and implementation notes are below.
Enabling Div Scroll Position URL Anchor Functionality
Here's the JavaScript required to scroll a div vertically according to a URL anchor. (No customization required.)
<script type="text/javascript">
/* URL Anchor Div Scroller
Version 1.0
July 18, 2015
Will Bontrager Software LLC
https://www.willmaster.com/
*/
function ScrollDivTo()
{
if( ! location.hash.length ) { return; }
if( location.hash.indexOf(",") < 1 ) { return; }
var hashvalue = location.hash.substr(1);
var arr = hashvalue.split(",",2);
var div;
if( ! (div=document.getElementById(arr[0])) ) { return; }
div.scrollTop = parseInt(arr[1]);
} // function ScrollDivTo()
ScrollDivTo();
</script>
No customization is required. Simply paste the JavaScript into your web page somewhere below the div that will be scrolled, such as immediately above the closing </body> tag.
The JavaScripts runs every time the page loads or reloads. It looks for an anchor tag it can work with. If it doesn't find it, it doesn't do anything else.
The JavaScript function that does the work goes through these steps:
-
If there's no anchor with a hash value in the URL, abandon the function.
-
If the hash value has no comma (which would separate the div id value from the number of pixels to scroll), abandon the function.
-
If there's no HTML element with an id value as specified in the hash value, abandon the function.
-
Vertically scroll the div with the indicated id value by the number of pixels specified after the comma in the hash value.
As you can see, the JavaScript plays nice even if there's no anchor or the anchor has invalid information.
How to construct an anchor for scrolling a div: Specify the id value of the div to scroll, followed by a comma, and that followed by the number of pixels to scroll.
Example: If your div has an id="scroll-example" attribute and you want the div to scroll down 200 pixels when the page loads, this would be the anchor: scroll-example,200
Append the anchor to the URL that links to your web page: http://example.com/#scroll-example,200
The source code of the demonstration page is an example of how an anchor link for a div can be implemented. The functionality doesn't interfere with web page position anchors.
(This article first appeared in Possibilities ezine.)
Will Bontrager
