Log in

Previous Entry | Next Entry

jScrollPane Pain

So I've been using the jScrollPane plugin for jQuery on one of the Smithsonian websites I've been working on. It's a great plugin, but one of the main problems with it is that it doesn't handle anchor links well (or at all, really). Here is a fix. Just paste this code into a script tag in your document and everything will work automagically (as long as your scrollpane divs are of class "scrollPane" and you are using jScrollPane > 1.2 and jQuery > 1.2):

<script type="text/javascript">
		var targetElementSelectorString = $(this).attr('href');
		var anchorName = targetElementSelectorString.substr(1); //strip the hash

		if (anchorName.length > 0) {
			var anchorSelector = "a[name='" + anchorName + "']";
			var anchor = $(anchorSelector).eq(0);
			if (anchor.length > 0) {
				var pane = anchor.parents(".scrollPane").eq(0);
				if (pane.length > 0) {
					//var pos = $anchor.offset().top - $pane.offset().top;
					return false;
		return true; //just follow the link if it's not to a scrollpane


( 1 comment — Leave a comment )
Dec. 19th, 2008 10:53 pm (UTC)
Hi El Fuego,

Glad you like jScrollPane. You may want to make sure you are using the latest version of the plugin as I added some similar code to this in the 1.2 release a while back:


Let me know if you have any problems with the latest release,


Kelvin :)

p.s. Your script won't work with content which was added to the page after you can the script. I use event delegation to avoid this problem...
( 1 comment — Leave a comment )