Вместо использования поведения браузера по умолчанию (для тегов привязки) просто заблокируйте его и прокрутите поле самостоятельно.Я вижу, вы уже используете JQuery.Таким образом, что-то вроде этого должно сработать.
$('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);
});
Довольно сложно протестировать в контексте этой страницы, но если вы настроите скрипку только с этой частью, я уверен, что это может бытьочень легко работать правильно.
(правка) - OP настроил скрипту с проблемой, обновленная версия здесь:
http://jsfiddle.net/H3Mz6/9/
Код выше былобновлен, чтобы отразить то, что на самом деле работает.Я также добавил идентификатор "the_div" в div, окружающий таблицу локаций.Вот как это работает:
1) получить часть href после # - браузер может добавить полный URL.2) найдите его, затем получите элемент next(), потому что невидимые теги привязки сообщат, что у них нет информации о местоположении. 3) затем получите значение position().top, которое является положением этого элемента относительно его контейнера 4), затем scrollTop(..) к нему
Вопреки предложению @ colinross, нет ничего, что не было бы ни расширяемым, ни негибким в отношении карт изображений.Напротив, они являются единственным способом получения горячих точек неправильной формы, без особых проблем, и это дает вам много сил.Все, что вам нужно сделать, чтобы заставить их делать то, что вы хотите, это связать свои собственные события наведения мыши и / или щелчка с областями и вызвать e.preventDefault().Оттуда все ваши.
Да, мне нравятся карты с изображениями, и я также написал плагин , который очень много с ними делает.Так что я довольно предвзят.Но меня удивляет проблема, с которой люди сталкиваются, чтобы избежать их (например, абсолютно позиционирование якорных ссылок, сложных CSS и т. Д.), Когда они чрезвычайно просты, просты в использовании, работают с любым браузером под солнцем игораздо более мощный, чем размещение всех ваших горячих точек вручную.(И без карты изображений или какой-то сумасшедшей логики, чтобы выяснить, где находится мышь, вы все равно ограничены прямоугольными областями!).