A Floating Jump Menu For Quick Page Navigation Via JavaScript / DOM

Recently asked on Yahoo! Answers:

HTML HELP creating a drop down box?

Hi, i want to create a drop down box, that when you select whatever choice is inside, it’ll bring you to a different part of the page. Get it ??? i don’t know if i explained it properly……

Yes, this is very clear; back in the day we called it a “jump menu” (who knows what the kids might call it today?).

Basically, you have a simple SELECT list that goes to a named anchor corresponding to one of its options. That’s easy enough to do in JavaScript; we just set the window.location.hash value to be the value of the selected item, and call that via the SELECT list’s OnChange event. (Link to sample code that does just that appears at the end of this article.)

The problem is that a fixed jump menu, in addition to being straight out of 1999, is also pretty useless; you have to scroll all the way to the top of the page to use it.

But what if the scroll box followed the page as it moved? You could go to any section you want at any time, without having to bother with traveling all the way back to the top of the page. Now, that would be something; and, thanks to some floating DIV code I found at javascript-fx.com, it’s a reality.

Step 1: The HTML Select List

First step in our process is to add a FORM with a SELECT list to our HTML. The SELECT needs to have a unique ID attribute, so we can find it easily in JavaScript.

That list will have, as its values, the various named anchors on the page; and it will have an OnChange event attribute that calls a function named goToAnchor().

<form id="form1" action="">
  <label for="anchorpoint">Jump to: </label>
	<select name="select" id="anchorpoint" onchange="goToAnchor()">
	  <option value="#top" selected="selected">Top</option>
	  <option value="#overview">Overview</option>
	  <option value="#discussion">Discussion</option>
	  <option value="#summary">Summary</option>
	  <option value="#biblio">Bibliography</option>

Step 2: Create The JavaScript Function

As previously noted, going to an anchor in JavaScript is as simple as setting the window.location.hash attribute.

In our case, we get the SELECT list via getElementById, then set the hash as the value of the selected item in that list. Yup, it’s that simple.

function goToAnchor() {
	var anchorSelect = document.getElementById('anchorpoint');
	window.location.hash = anchorSelect.options[anchorSelect.selectedIndex].value;

Step 3: Add The Floating Menu

Technically, we’ve answered the question. But again, a fixed jump menu on a long page makes about as much sense as a bottle of water at a marathon’s start line. To be of use, the jump menu needs to move with us, and thanks to DOM and the “floating DIV,” it will.

I lifted the code for the floating DIV I use here from javascript-fx.com, because it works perfectly fine and I’m feeling lazy at the moment. At some future date I might reinvent the wheel, but for now, I’ll let it slide.

I won’t display that code or break down how it works, but I will mention it in passing as I describe how to make the menu float.

First, we need to encapsulate the FORM in a DIV that has a unique ID. Additionally, that DIV must have a CSS style of position: absolute for the script to work.

An aside on the absolute positioning of a mobile object: If the floating DIV doesn’t have an absolute position, it won’t move from where you first declare it on the page.

I know that seems counter-intuitive — setting the DIV’s position to absolute so it can move around. But what the floating DIV script really does is constantly poll the window. Every time the window’s scroll position changes, the DIV is reset to have an X (horizontal) and Y (vertical) position that is some number of pixels away from one of the corners of the window.

Because the DIV has an absolute position, we can dictate its X and Y coordinates; if it doesn’t have an absolute position, or if we specify no position, it won’t go exactly where we want it to go. (End of aside; back to the point.)

We’re additionally going to set the floating DIV’s background color, padding and border, because we want it to show up well as it floats over the text / other page elements.

<div id="floatDiv">
	<form id="form1" action="">
		<label for="anchorpoint">Jump to: </label>
		<select id="anchorpoint" onchange="goToAnchor()">
			<option value="#top">Top</option>
			<option value="#overview">Overview</option>
			<option value="#discussion">Discussion</option>
			<option value="#summary">Summary</option>
			<option value="#biblio">Bibliography</option>
#floatDiv {
	position: absolute;
	background: #eee;
	padding: 10px;
	border: 1px solid #000;

The JavaScript to power the floating DIV must appear after you declare the DIV itself. I know that isn’t clean in the strictest sense — it will generate warnings about misusing delimiters if you run it through the W3C HTML Validator — but it serves our purposes, so again, I’m not going to reinvent the wheel.

After we place the script following the DIV we want to float, we just need to give the ID of the DIV, and the left (x) and top (y) offsets, to the function JSFX_FloatDiv().flt():

JSFX_FloatDiv("floatDiv", -250, -100).flt();

You can see both the static menu and floating menu demos of this script here:

Example 1: With Static Jump Menu

Example 2: With Floating Jump Menu

To use them yourself, simply save the page to your hard drive and start hacking.

I distribute code under the GNU GPL. See Copyright & Attribution for details.

Leave a Reply

  • Check out the Commenting Guidelines before commenting, please!
  • Want to share code? Please put it into a GitHub Gist, CodePen or pastebin and link to that in your comment.
  • Just have a line or two of markup? Wrap them in an appropriate SyntaxHighlighter Evolved shortcode for your programming language, please!