View Full Version : jquery scrollTo animation hell.

01-11-2011, 02:52 AM
I'm a novice so bare with me, I really need talking through this. I can't get the scrollto animation to work at all, it does move to right div id but with no animation. Could some one please help.

I have this in my head:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript" src="Java/jquery.scrollTo-1.4.2-min.js"></script>

I've checked that the scrollto-1.4.2-min.js is where I think it is so that's not a problem.

I've then got:

<div id="aboutbutton"><script type="text/javascript" src="Java/scroll.js"></script><a href="#titles" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('AboutButton','','images/buttons/aboutblue.png',1)"><img src="images/buttons/aboutwhite.png" alt="about" name="AboutButton" width="80" height="32" border="0" id="AboutButton" /></a></div>

..on my roll over image. With the Scroll.js file being this:

$(document).ready(function() {
duration: '4000'

Why doesn't this work?! Am I being an idiot? I've only being working on javascript for three days (I've spent all three trying to do this!) so I would love some one to correct the code if at all poss.

Would REALLY appreciate any help.


01-11-2011, 03:43 AM
Well, first of all, it kind of shows that you don't know much about javascript:

<script type="text/javascript" src="Java/scroll.js"></script>
Don't put your scripts in a 'Java' folder. Just wait till Philip M is around to tell you off.

Second, don't use some obsolete version of jQuery. Current version is 1.4.4., use that.

Now, the real problem:

$(document).ready(function() {
duration: '4000'
should most definitely be

$(document).ready(function() {
duration: '4000'
Use some kind of debugger like firebug, so those obvious syntax errors won't happen.

01-11-2011, 04:28 AM
thanks but that didn't work at all...

I updated the script, moved the java into my public folder and added latest version of javascript.

http://www.andrewstaffordmusic.co.uk if you want to take a closer look.

anyone with any ideas?

its mega important.

01-11-2011, 04:43 AM
It worked insofar as there's now one error less.

I told you to use a debugger. It's mega important. It will tell you that $ is not defined, because you didn't close the quote in the script tag embedding jQuery.

01-11-2011, 03:06 PM
Has anyone less patronising implemented a javascript animated scroll?

I'd love to know how it's done but rather not be spoken to like an piece of crap.

I don't know javascript well. fact.
I also know that everyone that does know javascript, at one point knew less than I do know. We all have our own skill set.

I really need to finish this website, its for myself and I'm not a professional.

These are the instructions I tried my best to follow http://flesler.blogspot.com/2007/10/jquerylocalscroll-10.html

...which resulted in the code in my first post, would anyone mind spending 5 minutes just talking me through it. The author of the Jquery plugin says it "incredibly easy". I'm guessing that refers to anyone that actually knows a thing or two about javascript.

01-11-2011, 07:41 PM
You have:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js></script>

which should be:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>

As venegal points out, if you use an html validator (http://validator.w3.org/check?uri=http%3A%2F%2Fwww.andrewstaffordmusic.co.uk%2F&charset=%28detect+automatically%29&doctype=Inline&group=0), it will pick up at least the missing quote.

If it helps, here is a test page (http://www.simonbattersby.com/test/scroll.htm) that uses scrollTo (click on About at the top) which I wrote helping a user on this thread (http://www.codingforums.com/showthread.php?t=213208).

01-11-2011, 08:02 PM
you're missing a comma (in red below):

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

and you're not linking to all the files:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="http://www.andrewstaffordmusic.co.uk/Java/jquery.scrollTo-1.4.2-min.js"></script>
<script type='text/javascript' src='http://demos.flesler.com/jquery/localScroll/js/jquery.localscroll-min.js'></script>

is what you need.

The whole scrollTo and local scroll seems like over kill for what you are doing though. The local scroll plugin can take x and y positions, you only need x.

the below uses a different smooth scroll method. make sure you download and link locally to the file here:

https://github.com/kswedberg/jquery-smooth-scroll (the jquery.smooth-scroll.min.js is what you need)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Scroll :: easy version ;)</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
$('div#nav a').smoothScroll();

<style type="text/css">
body {
padding: 80px 0 22px 0;
margin: 0;
div#nav {
padding: 20px;
background: #eee;
border: 2px solid #000;
text-align: center;
width: 100px;
position: fixed;
top: 0;
right: 0;

div#first, div#second, div#third, div#fourth {
width: 500px;
height: 500px;
margin: 0 0 30px 0;
border: 1px solid #000;
background: #ddd;


<div id="nav">
<li><a href="#first">Link 1</a></li>
<li><a href="#second">Link 2</a></li>
<li><a href="#third">Link 3</a></li>
<li><a href="#fourth">Link 4</a></li>

<div id="first">First div</div>
<div id="second">Second div</div>
<div id="third">Third div</div>
<div id="fourth">Fourth div</div>

01-11-2011, 08:12 PM
Hmm, just been playing around with this and I couldn't get it to work using $.localscroll either. I'm not very familiar with the plugin, wonder if possibly this is outdated, but if you make your Scroll.js:

$(document).ready(function() {

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

and sort the missing close quotes it does work.

I didn't see a problem with linking to the js files myself.

01-11-2011, 08:43 PM
In his original code he actually isn't linking to the localscroll file, thus the function doesn't work.


The above needs to be in there as well.

But, like I said and looks like you agree, a simpler scrollTo would be better.

01-11-2011, 09:35 PM
Yes, you're quite right, but Firebug didn't throw an error on the localscroll function. Odd....

01-11-2011, 09:41 PM
Made a few changes and it still doesn't work.

I've made another age to it test it out so as not to screw my working page.


Could you look at that and see what it is?

I've changed my scroll.js like you said and added the corrected scripts to the head...

Also, you guys are aware that this should be animated scrolling right? the site already "jump" scrolls..

Many thanks for any replies.

01-11-2011, 11:36 PM
guys I'm desperate...

01-11-2011, 11:48 PM
I also remember reading the default animation is set to "none" maybe that's why you couldn't get scroll to working.

I couldn't figure out how to change the setting though...

http://flesler.blogspot.com/2007/10/jquerylocalscroll-10.html this where it says how to implement

http://flesler.blogspot.com/2007/10/jqueryscrollto.html this is the one where it says the default s set to none.

01-12-2011, 01:19 AM
I am also using dreamweaver to try and debug and have downloaded firebug...

it hasn't really helped in that I don't really know what I'm looking for.

There's nothing relevant thats red which is always a good sign!

I've dedicated yet another evening to this and got nowhere..


01-12-2011, 01:25 AM

if(localtion.hash) {
var hash = location.hash;



01-12-2011, 01:45 AM
updated & still nothing...

angry and depressed...

4 days now.

01-12-2011, 01:52 AM
I'll send whoever fixes this a load of CDs and my everlasting gratitude.

You can use whatever method you like so long as I can edit the settings as and when I update the site...

Would ithelp if I gave someone access to the site, or is that a REALLY bad idea?

01-12-2011, 08:31 AM
Here's my version (http://www.simonbattersby.com/test/test_andrewstafford.htm) of your page with the amendment per my post #8 above. Haven't looked at your amended page.

01-12-2011, 10:03 AM
This looks great! I'll check it out when I get back from work.

Thank you!

01-12-2011, 08:16 PM
I love you in so many digital ways its unreal.

Use my email from the site and chuck me a mail with your address and I'll get a nice little package off to you.

One small change though, is there any way of adding to the where the clicks are captured? I want to add top and bottom logos as links to the very top of the page and they aren't in the menudiv.

BIG up!

01-12-2011, 08:47 PM
Also what do you think of the site? (I've made a few changes.)

02-02-2011, 08:11 AM
First and foremost, the site looks great. With that said, Java and JavaScript are two completely different languages. If you still need help with localScroll, I can help you out. I was once very frustrated with it as well, but once you understand it, it can really be an amazing plugin. It looks as though you're all set though. Anyway, good luck.