Question

我正在构建一个商店目录页面，该页面的左侧是所有商店的列表，右侧是五张地图。这样的想法是，当您将鼠标悬停在左侧的商店时，地图将自动滚动到相应的位置区域。

每个区域都有一个独特的想法，例如hotspots-image-520-area-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);
    }

有人可以为此提供一些帮助吗？我有点茫然。我们将不胜感激。

滚动到图像地图的特定区域

0 个答案: