Instead of using the default browser behavior (for anchor tags) just block it, and scroll the box yourself. I can see you are already using jQuery. So something like this ought to do the trick.
$('area').bind('click', function(e) {
e.preventDefault();
// the div in question has nothing uniquely identifiable as it is now,
// assign it a unqie class or id so you can select it
var findAnchor=this.href.split('#')[1];
$('#the_div').scrollTop($('a[name="' + findAnchor+'"]').next().position().top);
});
It's kinda hard to test in the context of that page, but if you set up a fiddle with just that part of it I am sure this could be made to work right pretty easily.
(edit) - OP set up a fiddle with the problem, updated version here:
http://jsfiddle.net/H3Mz6/9/
The code above has been updated to reflect what actually works. I also added the id "the_div" to the div surrounding the table of locations. Here's how it works:
1) get the part of the href after the # - the browser may add the full url.
2) find it, then get the next()
element, because the invisible anchor tags will report that they have no location information
3) then get the position().top
value which is the postion of that element relative to it's container
4) then scrollTop(..)
to it
Contrary to @colinross's suggestion, there's nothing that's either non-extensible nor inflexible about imagemaps. Quite the opposite, they are the only way you can have irregularly shaped hotspots without going to a heck of a lot of trouble, and that gives you a lot of power. All you need to do to make them do whatever you want is bind your own mouseover and/or click events to the areas, and call e.preventDefault()
. It's all yours from there.
Yes, I like image maps, and I also wrote a plugin that does a heck of a lot with them. So I am fairly biased. But I am surprised by the trouble people go to in order to avoid them (like absolutely positioning anchor links, complex css, and so on) when they're dead simple, easy to use, work with every browser under the sun, and are far more powerful than positioning all your hotspots by hand. (And without an imagemap, or some crazy logic to figure out where the mouse is on your own, you're limited to rectangular areas anyway!).