jQuery: pageMap

more at: http://stackoverflow.com/questions/13819275/add-navigation-points-to-scrollbar-based-on-highlighted-span-in-scrollable-div-e#comment19113466_13819913 http://vipullimbachiya.com/dotnethero/miniMap/index.html

HTML

<div id="holder">
    <div class="spot first">1st</div>
    <div class="spot second">2nd</div>
</div>

CSS

html,body{width:200%; height: 200%}
body{background: whiteSmoke}
#holder {
    width: 100%;
    height: 100%;
    position: relative;
}

.first {
    position: absolute;
    top: 50%;
    left: 50%;
}
.second {
    position: absolute;
    top: 75%;
    left: 74%;
}


.minimapWrapper {
    position: fixed;
    bottom: 0;
    left: 0;
    opacity: 0.8;
}

.miniMap {
    width: 160px;
    height: 160px;
    margin: 0px 5px 0px 0px;
    position: relative;
    background: #fafafa;
    border: 1px solid #ccc;
}

.miniMap .marker {
    display: inline-block;
   
    height: 6px;
    width: 6px;
    cursor: pointer;
    position: absolute;
    background: #222;
    border-radius: 50%;
}


.cursor {
    position: absolute;
    width: 6px;
    height: 6px;
    z-index: 999;
    background: #c00;
    border-radius: 50%;
}

JavaScript

var Map = function() {
    $('body').append('<div class="minimapWrapper"><div class="miniMap"><i class="cursor"></i></div></div>');

    var holder = $("#holder"),
        miniMap = $(".miniMap"),
        spots = holder.find('.spot'),
        holderPos = holder.offset();

    if (spots.length > 0) {
        var holderW = holder.width(),
            holderH = holder.height(),
            mapW = miniMap.width(),
            mapH = miniMap.height();

        spots.each(function() {
            var point = $(this),
                pointPos = point.offset(),
                top = pointPos.top - holderPos.top,
                left = pointPos.left - holderPos.left,

                marker = $(document.createElement('span')),
                markerTop = (mapH * top) / holderH,
                markerLeft = (mapW * left) / holderW;

            markerTop = Math.abs(markerTop);
            markerLeft = Math.abs(markerLeft);

            marker.css({
                top: markerTop,
                left: markerLeft
            })[0].className = 'marker';

            miniMap.append(marker);

            marker.click(function() {
                $('html,body').animate({
                    scrollTop: pointPos.top,
                    scrollLeft: pointPos.left
                });
                return false;
            });
        });
    }
};

Map();



var Cursor = function() {
    var map = $('.miniMap'),
        cursor = map.find('.cursor'),
        marker = map.find('.marker');

    $(document).on('mousemove', function(e) {
        var pageX = e.pageX,
            pageY = e.pageY,
            winW = $(this).width(),
            winH = $(this).height(),

            mapWidth = map.width(),
            //mapWidth = (map.width() - cursor.width()) + marker.width(),
            mapHeight = map.height(),
            //mapHeight = (map.height() - cursor.height()) + marker.height(),
            posX = pageX / winW * mapWidth,
            posY = pageY / winH * mapHeight;

       ...