On-the-Fly 'Scroll-To' Anchor

Recently, we had a situation where certain incoming links to a page needed to scroll down automatically. The incoming link URLs didn't have #name appended (we'll call it a "scroll-to" anchor).

(The HTML name/id anchor article contains both the old and the new way of specifying and marking scroll-to anchors.)

To resolve the situation, an automatic scroll-to needed to be implemented so arrivals would immediately see the pertinent information they were looking for — instead of assuming the information isn't there and moving on.

Not all incoming traffic needed to scroll down to the certain point. Only the ones with a specific ?... URL parameter. Example:

http://example.com/page.html?A=B

We needed to somehow make the browser act as if #name was appended to the link URL, like:

http://example.com/page.html?A=B#name

But only when the URL contained the ?A=B parameter and no scroll-to anchor (#name).

A fairly simple little JavaScript was implemented. It causes the browser to act as if the link URL actually had #name appended to it.

The JavaScript has an if() function to test whether or not the link URL contains the ?A=B parameter. Because only those should have a scroll-to anchor appended.

Then there's a second if() function to test whether or not the link URL already has a scroll-to anchor. Only if it doesn't should #name be appended to the link URL.

Here's the JavaScript. Notes follow.

<script>
if( location.search && location.search.match(/^\?A=B/) )
{
   if( (!location.hash) || location.hash.length == 0 )
   {
      location.hash = "name";
   }
}
</script>

There are two places to customize.

1. The URL parameter colored blue needs to be changed to the parameter you're testing for. If the parameter value (the part after the "=" character) is changeable, then don't specify anything following the "=" character.

2. The scroll-to anchor colored purple needs to be changed to the scroll-to anchor name on your page where the browser needs to scroll to.

During the loading process, the JavaScript will run as soon as the browser encounters it.

Therefore, put the JavaScript in the source code somewhere below the place where the anchor name is located. And also below the place that would be at the bottom of the browser window when the page has finished scrolling.

The reason to put the JavaScript below the place where the anchor name is located is so the JavaScript can find it.

The reason to put the JavaScript below the place that would be at the bottom of the browser window when the page has finished scrolling is that the page can't scroll any further when the JavaScript runs. Because the JavaScript runs as soon as it's encountered, and the browser creates the page as it goes along, the JavaScript runs before the rest of the page exists.

The JavaScript is fairly easy to implement. Use it whenever you need to programmatically insert a hash name in the link URL of arriving browsers.

(This article first appeared in Possibilities ezine.)

Will Bontrager