Выделите определенную область карты изображения.

Я создаю страницу каталога магазина, в которой есть список всех магазинов слева и пять карт справа. Идея заключается в том, что когда вы наведете магазин слева, карта автоматически прокрутится до соответствующей области местоположения.

Каждая область имеет уникальную идею, такую ??как «горячие точки-изображение-520-область-5». Поэтому я думал просто использовать scrollTop для зависания, но он не работает. Вы можете просмотреть мою тестовую страницу по адресу https://cmxserv03.com/somerset/directory-test/ .

Вот код, который я использую. Он будет прокручиваться до верхней части контейнера карты, но не к отдельным областям карты.

$("#Aveda").hover(function() {
        $('html, body').animate({
            scrollTop: $("#hotspots-image-520-area-5").offset().top
        }, 500);
        return false;
    });

Я поговорил с разработчиком плагинов карт, и они сказали мне, что это связано с ограничением браузера. Они дали мне некоторое направление со следующей информацией и кодом:

«Первая часть этой функции связана с обнаружением того, пытается ли кто-то ссылаться на точку доступа и запускать некоторые пользовательские события, но ниже, что есть раздел, прокомментированный для расчета, где изображение и область находятся на странице.

В принципе, нам нужно было взять координаты, установленные для области, и найти минимальные и максимальные значения координат Y, а затем использовать их, чтобы выяснить, как далеко вниз по странице, которую нам нужно было бы прокрутить, чтобы убедиться, что выбранная область была в видовой экран. Вам, вероятно, придется что-то сделать, чтобы прокрутить выбранную точку доступа, чтобы надежно отображать ее в окне просмотра ».

* Link to an area */
    var linkToArea = function(){
        var hash = window.location.hash,
            area = null;

        if (!hash) return;

        if (hash) {
            area = $('area[href="' + hash + '"]');
        }

        if (!area.length) return;

        area.trigger('focus');
        area.trigger('mousedown');

        /* Calculate where the image and area are on the page */
        var map = area.parents('map'),
            mapRef = map.attr('name'),
            img = $('img[usemap="#' + mapRef + '"]'),
            imgTop = img.offset().top,
            coords = area.attr('coords').split(','),
            yCoords = [];

        for (var i=0; i<coords.length; i++) {
            if (i%2 != 0) {
                yCoords.push(coords[i]);
            }
        }

        var areaImgTop  = Math.min.apply(Math, yCoords),
            areaImgBottom = Math.max.apply(Math, yCoords),
            windowHeight = $(window).height(),
            windowBottom = imgTop + windowHeight,
            areaBottom = imgTop + areaImgBottom,
            areaTop = imgTop + areaImgTop,
            padding = 50,
            scrollCoord;

        // Scroll to the area to be sure it's in the view
        if (areaBottom > windowBottom) {
            scrollCoord = imgTop + (areaBottom - windowBottom) + padding;
            if ((areaBottom - areaTop) > windowHeight) {
                scrollCoord = areaTop - padding;
            }
        } else {
            scrollCoord = imgTop - padding;
        }

        setTimeout(function(){
            window.scrollTo(0, scrollCoord);
        }, 1);
    }

Может ли кто-нибудь помочь с этим? Я немного потерял. Любая помощь, которая может быть предложена, будет с благодарностью.