View Full Version : jQuery jQuery.localScroll Help (Can't get it working)

03-12-2011, 05:04 AM
Hi Everyone,

Here is what I'm working on: kernmagazine.com (www.kernmagazine.com)

I'm having a great deal of difficulty getting localScroll (http://flesler.blogspot.com/2007/10/jquerylocalscroll-10.html) to work on my site. Essentially I would like the scrolling effect to take place when the user selects a section from the navigation at the bottom.

The plug-in's documentation isn't the clearest on how to troubleshoot any problems. Hopefully someone can help. Thanks!

03-13-2011, 09:49 AM
I think there's a few things wrong here. You have some errors in your markup (http://validator.w3.org/check?uri=http%3A%2F%2Fwww.kernmagazine.com%2F&charset=%28detect+automatically%29&doctype=Inline&group=0) including some overlapping tags. Fix these first.

Then try replacing your scroll js with the simpler:

<script type="text/javascript">

$(document).ready(function() {

$('#navigation a').click(function(){
return false;


You can then remove the localscroll.js and just use scrollto.js. Works on a test page, vary the 4000 to change the scroll speed.

This is very similar to this thread (http://www.codingforums.com/showthread.php?t=214686).

03-14-2011, 05:58 AM
Thanks for drawing attention to the errors. I've cleared them up, but am still having difficulty invoking the script.

$('#navigation a').click(function(){

i've tried replacing #navigation with both the div id as well as the respective span ids that the links appear on, but to no avail. I've also tried the onclick method mentioned in this thead (http://www.codingforums.com/showthread.php?t=214686). Could the script be incompatible with the newest jQuery, or is there a conflict with other javascript i have running on the page?

Not too sure what's going on as I've tried numerous ways of troubleshooting but nothing seems to be working.

Thanks again.

03-14-2011, 08:41 AM
Yes, looks like there's a conflict with prototype. Try:

<script type="text/javascript">
jQuery(document).ready(function($) {

$('#navigation a').click(function(){
return false;


03-14-2011, 05:42 PM
Still having issues. If this is the Div that has the links:

<div id="bottom_nav">
<p id="nav_title">Universal Navigator</p>
<p id="navigation">
<span id="chap1"><a href="#part1">1</a></span>
<span id="chap1-1"><a href="#part1">Lost in the Cosmos</a></span>
<span id="chap2"><a href="#part2">2</a></span>
<span id="chap2-1"><a href="#part2">Listening to the Big Bang</a></span>
<span id="chap3"><a href="#part3">3</a></span>
<span id="chap3-1"><a href="#part3">Understanding the Earth</a></span>
<span id="chap4"><a href="#part4">4</a></span>
<span id="chap4-1"><a href="#part4">The Mighty Atom</a></span>
<span id="chap5"><a href="#part5">5</a></span>
<span id="chap5-1"><a href="#part5">The Periodic Table</a></span>
<span id="chap6"><a href="#part6">6</a></span>
<span id="chap6-1"><a href="#part6">So Here We Are</a></span>


$('#navigation a').click(function(){

be #navigation or the span IDs? (chap1, chap2, etc.) I've tried both including having #bottom_nav in there as well, but none are working.

Thanks for your patience

03-14-2011, 06:38 PM
#navigation a should be fine.

Looking at your current live page you have:


which should be:

jQuery(document).ready(function($){ etc...

By applying noConflict() we're relinquishing control of the $ variable, which is just a shortcut to jQuery anyway, so having done this we need to write jQuery in full on the document ready function. Including the $ as the argument for this function then allows us to use $ within the function as normal, if that makes sense.

Testing this out I created a test page using your html and css, which I've put online here (http://www.simonbattersby.com/test/slider2.htm) - and which works OK.

03-14-2011, 09:40 PM
Amazing! Thank you so much for your help

EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum