This demo shows simple/basic minimap like UI for HTML element, it helps to quickly navigate to specific items in a large list of items with help of jQuery.

Disclaimer : This is the first, untested version, it requires specific ordered/styled HTML to generate map properly and has very minimal options right now. I may improvise this code as I get time, but it is usable if followed same HTML/CSS as this page. You can send me your queries or issues at vipul[dot]limbachiya[at] gmail (format to valid email address).

Requires :
Download demo as a zip file
Usage : HTML :
<div>
	<div class="console-wrapper">
		<div id="logPanel" class="console">
		</div>
	</div>
</div>
CSS : (simpleMinimap.css)
.minimapWrapper
{
  float:left;
}

.miniMap
{
  clear: both;
  width:15px;
  border: 1px solid #ccc;
  float:left;
  min-height: 100px;
  padding: 2px;
  margin: 0px 5px 0px 0px;
  position: relative;
}

.miniMap .marker
{
  display: inline-block;
  background-color: orange;
  height:2px;
  width:15px;
  cursor: pointer;
  position: absolute;
}

.toTop, .toBottom
{
  float:left;
  width:15px;
  background-color: maroon;
  height: 10px;
  clear: both;
  padding: 3px;
  margin:1px 0px;
  cursor: pointer;
  text-align: center;
  color: white;
  font-size: 8px;
  padding-top: 0px;
  font-weight: bolder;
}
Javascript :
<script type="text/javascript">
	$(document).ready(function(){
		var minimap = $("#logPanel").simpleMiniMap({
			afterBuildMap : function(elem, map)
			{
				vtip(map); //Only if vtip is added and you want to show tooltip on markers
			}
		});
		minimap.buildMap(); //This builds markers and shows, every time when you update content of the element and want to reload markers, call this method.
	});
</script>
Options :
$.simpleMiniMap.defaultOptions = {
        filterElem : ".highlight", //Can be filtered by any possible jquery selector
        showScrollButtons : true, //To show/hide scroll to top/bottom buttons
        noTitleOnMarker : false, //No title/tooltip for markers
        titleBuilder : false, //If you want to customize title of marker, this is function, function(marker)
        beforeBuildMap : false, //method to call before building maf, function(mainElement, miniMapWrapper)
        afterBuildMap : false, //method to call after building maf, function(mainElement, miniMapWrapper)
        markerCSSClass : "marker", //CSS class for marker on minimap
        highlightBGColor : "#574E4E", //After scrolling to marker reference it highlights the parent item of it, this color will be used to highlight(as background color)
        highlightItemDuration : 1000 //0 will disable highlighting, duration of animation
    };

Demo :

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus non diam sed felis molestie sagittis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum pharetra volutpat libero a posuere. Etiam scelerisque lectus id tortor congue et facilisis est consequat. Integer facilisis euismod congue. In luctus, arcu bibendum vulputate mollis, est lacus consequat ligula, ac rutrum felis est vitae velit. Duis ornare molestie semper. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;

Ut placerat, eros quis dignissim iaculis, sem dui semper sapien, sit amet ullamcorper purus neque ac ligula. Sed vestibulum cursus lectus, nec consectetur neque tincidunt sed. Vivamus ultricies, est a dictum posuere, justo velit sodales odio, quis semper risus magna id mi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam est risus, iaculis sed ultricies non, iaculis eu sapien. Nam vel lectus at libero porttitor mattis. Suspendisse potenti. Ut et nunc nec eros blandit pretium.

In hac habitasse platea dictumst. Etiam scelerisque, mauris in lobortis fringilla, metus dui tincidunt sapien, quis iaculis velit augue a est. Quisque tortor urna, mattis ut vehicula sed, tempor nec dolor. Nulla sit amet tincidunt mauris. In eget nisl erat, eget fermentum justo. Nunc malesuada ultricies pulvinar. Aenean ut lacus ligula, quis egestas turpis. Phasellus placerat, nulla elementum consectetur pulvinar, purus lectus convallis justo, vitae elementum risus turpis et velit. Cras eu felis nec justo semper posuere. Sed rhoncus libero dui. Nunc condimentum laoreet tortor, ut ullamcorper nulla suscipit rhoncus.

Pellentesque varius massa in mi sagittis pellentesque. Sed ut odio odio, nec rutrum ipsum. Vestibulum bibendum quam eu nulla lobortis viverra vel vitae tortor. Aliquam non facilisis nunc. Etiam et egestas sapien. Donec a velit erat. Vivamus commodo rhoncus dui, in ultrices nibh convallis quis. Phasellus tempus ultrices augue, at pretium leo tristique sed. Ut sit amet nisl massa. Vivamus consequat tincidunt odio at aliquam. Nunc arcu tortor, semper id elementum ac, porttitor sit amet tellus. Curabitur id ligula sed lacus mattis pellentesque sed vitae ipsum. Donec egestas lacus mauris. Quisque facilisis est non lectus cursus ac ullamcorper mi feugiat.

Suspendisse eu metus felis, eget porta mauris. Maecenas felis nibh, semper in consequat viverra, ornare et enim. In sit amet lectus magna, et pretium velit. Suspendisse ut neque urna. Aliquam ac turpis ligula, ut dignissim eros. Donec nisl mauris, rutrum quis feugiat ac, vehicula ac erat. Quisque vel mi purus. Etiam vitae tellus sit amet erat lacinia pharetra. Aenean convallis hendrerit congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam vehicula eleifend tempor. Pellentesque scelerisque blandit cursus.

Donec eget nulla ante, eu faucibus est. In hac habitasse platea dictumst. Phasellus sed dictum purus. Sed velit leo, imperdiet sit amet tristique at, consequat interdum diam. Integer euismod tristique ante, eget vehicula libero accumsan nec. Mauris semper convallis metus, quis placerat lacus accumsan iaculis. Integer dignissim vestibulum lacus, id consectetur risus sagittis vitae. Donec semper tortor sit amet justo suscipit at adipiscing leo mollis. Nulla mollis, turpis sed ornare feugiat, sapien nibh pulvinar libero, euismod sodales ipsum orci vitae felis.

Nulla turpis nibh, hendrerit sed faucibus ut, posuere in quam. Sed nec condimentum massa. Quisque viverra mi fermentum urna lobortis vitae cursus purus tempus. Donec ut diam vitae diam pharetra porta quis non tellus. Sed tempor tincidunt ultrices. Curabitur eu molestie justo. Maecenas euismod bibendum purus sed lacinia. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas non dignissim sem. Donec non mauris non orci pellentesque iaculis.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec dui urna, quis tempor felis. In eu odio lectus. Fusce pharetra est et nisi vestibulum ut facilisis risus vulputate. Suspendisse vestibulum porttitor convallis. Maecenas sed aliquet urna. Phasellus facilisis, justo elementum pulvinar placerat, velit risus dictum urna, a molestie ipsum nulla a elit. Mauris malesuada nibh quis mi hendrerit cursus eleifend est interdum. Vivamus fringilla venenatis dui, vehicula sollicitudin nisi iaculis eget. Suspendisse sit amet lorem tellus, et hendrerit nisi. Maecenas fermentum porttitor leo id viverra. Morbi et consequat ligula. Maecenas varius porta ante, bibendum ullamcorper tortor mollis nec. Curabitur dapibus purus quis quam pretium sit amet dictum diam euismod. Quisque sit amet risus sed libero rhoncus fermentum quis in nisl.

Phasellus lorem urna, semper eget lacinia ut, tristique ut sem. Ut diam erat, facilisis eget mollis quis, hendrerit nec elit. Sed libero augue, tempus nec suscipit a, pretium quis quam. Cras euismod, lacus commodo sodales dapibus, orci orci semper velit, quis ornare felis risus pellentesque enim. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quis dapibus tortor. Fusce ut nulla sem, vitae imperdiet est. Ut eu est a odio vehicula condimentum quis id nisl. Curabitur vitae enim at tellus dictum mattis. Aenean vehicula placerat orci ut placerat. Pellentesque lectus est, blandit ut eleifend varius, luctus eget justo. Proin adipiscing aliquam tellus a ornare.

Nunc ac suscipit ipsum. Praesent porta varius fermentum. Phasellus eleifend nisl sit amet lacus vehicula sed posuere libero molestie. Proin posuere lacinia ullamcorper. Morbi leo lectus, commodo eu tempus in, mattis eget massa. Sed imperdiet, nunc eget imperdiet eleifend, nunc ipsum ultricies velit, at aliquet metus neque nec ipsum. Sed rhoncus pulvinar orci pharetra convallis. Donec tristique, ipsum a ultricies sodales, diam leo pretium augue, ut pellentesque sem est a nunc. Sed ornare scelerisque eros, nec iaculis velit tempus non. Ut fringilla vestibulum massa at mattis. Aenean cursus tellus id lacus malesuada ut sagittis nunc egestas. Morbi mauris justo, porttitor sed venenatis vitae, eleifend quis lorem. Quisque non sapien id felis placerat cursus.

Donec eu pellentesque nibh. Sed ac mauris erat, non egestas nulla. Nam eleifend congue rutrum. Aliquam ac sem eros, vitae vulputate dolor. Curabitur libero libero, ullamcorper sit amet suscipit ac, tempus hendrerit urna. Vestibulum at orci tellus. Nulla facilisi. Morbi placerat porttitor velit vitae aliquam. Cras eleifend, lectus sed varius mollis, est nunc aliquam augue, eu accumsan leo lorem quis leo. Donec eget sollicitudin lacus. Nulla in iaculis velit. Integer tempus ullamcorper nunc, vitae suscipit neque congue a. Suspendisse molestie tincidunt dignissim. Morbi nec eros nunc.

Quisque ut nisi quis lorem condimentum tincidunt. Suspendisse vitae urna lorem. Vestibulum varius, velit at fringilla posuere, nunc felis condimentum libero, ac dignissim eros dui in risus. Integer est massa, suscipit in sollicitudin at, aliquam congue risus. Fusce pulvinar consectetur massa in pharetra. Sed pretium justo eget leo scelerisque sollicitudin. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cras vehicula, lacus ac ultricies adipiscing, neque eros faucibus mi, at euismod augue leo id lorem. Quisque gravida, lectus sit amet malesuada pharetra, arcu turpis dapibus purus, vel posuere elit libero eget augue. Integer et justo nulla. Sed eu enim in metus venenatis gravida quis non risus. Ut nulla ligula, pretium eu tincidunt vitae, cursus id metus. Praesent porta varius tincidunt. In hac habitasse platea dictumst. Quisque non justo eget turpis scelerisque ullamcorper.

Vestibulum vel nisl sit amet nunc venenatis bibendum. Donec enim sem, ornare non dictum a, mollis sed quam. Aenean faucibus facilisis gravida. Quisque vitae nunc mi, sit amet hendrerit ante. Suspendisse sit amet mi tellus, dictum suscipit leo. Suspendisse molestie convallis odio ac egestas. Sed rutrum mattis sem a porttitor. Fusce adipiscing eros at massa ultricies vel dictum nisi imperdiet. Aenean rhoncus ornare sem, id iaculis tellus accumsan vel. Curabitur tellus augue, mollis eget laoreet quis, imperdiet ac elit.

Fusce eleifend libero sed diam consectetur facilisis. Proin feugiat congue odio ac accumsan. Sed viverra urna at libero imperdiet tempor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin tempor, libero eleifend ultrices aliquet, orci ante euismod nunc, quis condimentum turpis nisl gravida tellus. In hac habitasse platea dictumst. Phasellus lacus tortor, condimentum nec auctor ut, tincidunt nec lacus. Fusce pulvinar eros et urna laoreet consectetur commodo ut purus. Sed et justo non purus placerat imperdiet. Pellentesque condimentum lobortis magna accumsan faucibus. Fusce porta elementum gravida. Sed ultricies ligula eget turpis sagittis et facilisis lectus adipiscing. Suspendisse luctus eros quis nibh cursus pulvinar. Aenean cursus risus in tortor sollicitudin nec tincidunt mi rutrum.

Integer mollis lorem semper neque mattis vestibulum eu et diam. Proin tempus imperdiet hendrerit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque id rhoncus sem. Sed consectetur, purus non hendrerit consectetur, est nulla fermentum leo, et ultrices dui turpis sit amet mi. Nullam varius convallis metus, a imperdiet nibh faucibus non. Aenean a diam nibh, at pulvinar sem. Proin consectetur hendrerit augue sit amet pretium. Integer tincidunt sollicitudin augue, id ullamcorper augue condimentum id. Nam hendrerit faucibus quam et tempor. Etiam vel justo quis justo luctus adipiscing eget vel tortor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec commodo, arcu eu iaculis ultricies, eros sem consectetur magna, ac sodales magna magna quis dui.

Suspendisse viverra felis viverra orci luctus pulvinar. Sed laoreet eros ut risus aliquet blandit. Aenean ac elementum mi. Nam in condimentum enim. Nulla tincidunt consectetur tortor a pellentesque. Aliquam sit amet nunc quis arcu tempor viverra. Vivamus nec odio tortor, eget sollicitudin urna. Sed euismod iaculis libero id consectetur. Morbi dolor ante, ultrices non commodo eu, elementum ac sem. In neque odio, commodo ac pharetra ut, consectetur ac ipsum.

Maecenas nec ante vel leo auctor sagittis. Morbi sit amet est nulla, et ullamcorper erat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse nunc nunc, pulvinar vel volutpat nec, cursus ac tellus. Ut sollicitudin quam a nisi mollis faucibus. Donec accumsan vestibulum nulla lobortis placerat. Nullam eleifend sem quam. Cras venenatis porta odio, a gravida lectus interdum pulvinar. Sed aliquet porta imperdiet. Aliquam erat volutpat. Nam pharetra, lacus sed sagittis rutrum, dolor neque imperdiet turpis, sit amet aliquam nibh nulla sed tellus. Vestibulum facilisis justo at magna pellentesque vulputate eget a mauris. Vestibulum urna ante, suscipit feugiat pulvinar sed, facilisis sed nunc. Nam pulvinar pellentesque mi eu ullamcorper.

Duis lorem dui, condimentum at tempus eu, porttitor commodo nisi. Aliquam sit amet purus turpis. Quisque eu risus nulla, sit amet aliquam ante. Integer in dui dui. Ut eget ipsum dolor, a sodales neque. Nullam pretium pharetra urna, id accumsan sem dictum eget. Fusce tincidunt mattis fringilla. Quisque condimentum dui non lorem eleifend non laoreet magna malesuada.

Nullam vitae mattis leo. Sed eu orci nulla. Vivamus in est id leo auctor bibendum eu et nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam erat volutpat. Nunc sed dui velit, eget mollis ligula. Cras volutpat egestas augue quis elementum. Sed id nulla elit, et feugiat eros.

Curabitur vel dolor vel sem aliquet luctus. Mauris hendrerit iaculis nisl, in placerat lacus dapibus ut. Vivamus sollicitudin luctus orci, at tincidunt mauris vestibulum sit amet. Curabitur dignissim, magna a adipiscing condimentum, velit erat rutrum metus, elementum placerat libero nulla et ligula. Aenean in erat tortor, nec interdum ipsum. Curabitur vel turpis ut magna pharetra tincidunt quis et est. Curabitur eu mi odio, id interdum urna. Donec id egestas arcu. Aenean at purus purus.

Nam viverra orci a purus vestibulum condimentum. Duis rutrum neque sit amet nisi lobortis in consectetur enim interdum. Aenean justo felis, consequat eu rhoncus ac, pharetra tincidunt nisl. Pellentesque fringilla venenatis ornare. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec facilisis risus ut purus molestie sagittis. Etiam iaculis suscipit justo vitae posuere. Integer et urna enim, a elementum eros. Suspendisse auctor ultricies odio, ac hendrerit magna egestas ut. Nunc ac sodales elit. Sed eget tincidunt elit. Fusce id nulla sapien, sed commodo mauris. Aliquam erat volutpat. Aliquam tempor, turpis a sagittis feugiat, odio justo euismod odio, sit amet sollicitudin nibh nibh et diam. Cras at urna nunc, vulputate dapibus velit.

Morbi vulputate dignissim elit sit amet sollicitudin. Nullam quis risus sapien, eu tempor ipsum. Aliquam ultricies adipiscing dolor, at interdum elit eleifend ut. Quisque feugiat fringilla dolor et faucibus. Quisque viverra placerat metus, sed semper metus pellentesque eu. Praesent sagittis, neque vitae luctus lacinia, lectus dui tincidunt lacus, et commodo ligula augue et lorem. Cras sagittis dolor vel diam commodo consequat. Fusce congue purus adipiscing lectus congue auctor. Sed elit ipsum, ultricies vitae malesuada in, faucibus sit amet massa. Curabitur vestibulum mauris vitae turpis laoreet vitae vulputate massa malesuada. Curabitur consequat lacus id massa venenatis ornare. Aenean pellentesque lorem at lacus rhoncus dignissim. Mauris accumsan neque id lorem convallis mattis. Vestibulum eget risus dolor, nec interdum eros.

Quisque fringilla consectetur dapibus. Vivamus pulvinar tortor in diam mattis eu interdum lorem viverra. Vestibulum aliquet tincidunt fermentum. In aliquet ligula ac sem vestibulum sed eleifend nibh dignissim. Sed sapien ipsum, porttitor et tincidunt eu, convallis nec velit. Mauris lobortis sapien et leo ornare dictum. Duis pellentesque tincidunt urna, eget tristique turpis laoreet et. Praesent sit amet lacus magna.

Vestibulum porttitor fringilla pulvinar. Mauris sapien nulla, interdum at consectetur sit amet, lobortis quis elit. Morbi non risus sapien, eget pulvinar tellus. In at lacinia nisl. Vivamus vestibulum euismod libero, vel semper lorem tempus accumsan. Curabitur id diam risus. Ut sapien massa, lacinia non ultrices a, ullamcorper non lectus. Proin lacinia elit et nisi semper quis pulvinar dolor rutrum. Donec faucibus quam tellus, at fringilla nisl.

Etiam eros massa, vulputate nec viverra ac, varius quis metus. Phasellus ultricies libero ut leo faucibus aliquet. In vel massa eleifend augue interdum tincidunt. Sed tortor diam, commodo in rhoncus in, adipiscing sed odio. Integer sed metus quam, vel dapibus neque. Nam quis dui mi, eu dignissim ante. Proin et tellus placerat libero vestibulum ornare sit amet pellentesque felis. Nunc quis tellus eu magna pharetra sodales at at mauris. Pellentesque ornare scelerisque sagittis. Vivamus sit amet metus urna. Nulla fringilla orci sed leo dignissim congue. Vivamus vel tellus leo. Integer vitae odio sit amet nisi ornare placerat a imperdiet dolor. Aliquam sagittis mi non velit sagittis porttitor.