jquery ScrollTo not working

11va17bene

12-27-2010, 05:32 AM

Hello,

Well I'm another one of those new people who is not a javascript person. I have scoured the threads and have tried to implement everything I could find but it is still NOT working. I have a one page portfolio website and I want the person to click the link and it jumps down to the div containing that link. I don't know if divs need to be in the same wrapper because I have different widths for everything. Here is what I have, any help is greatly appreciated. Below is the code in the head and the navigation in the body.

<head>

<style type="text/css">

<link href="style.css" rel="stylesheet" type="text/css" />
<script type='text/javascript' src='jquery-1.4.3.min.js'></script>
<script type='text/javascript' src='js/jquery.scrollTo-min.js'></script>
<script type='text/javascript'>jQuery(function( $ ){
//borrowed from jQuery easing plugin
//http://gsgd.co.uk/sandbox/jquery.easing.php
$.scrollTo.defaults.axis = 'xy';
$.easing.elasout = function(x, t, b, c, d) {
var s=1.70158;var p=0;var a=c;
if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3;
if (a < Math.abs(c)) { a=c; var s=p/4; }
else var s = p/(2*Math.PI) * Math.asin (c/a);
return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
};
});</script>

</head>

<body>

<div id="navcontainer">
<ul id="navlist">
<a href="#" onclick="$.scrollTo( '#about', 8000, {easing:'elasout'} );">about</a>
<a href="#" onclick="$.scrollTo( '#work', 8000, {easing:'elasout'} );">work</a>
<a href="#" onclick="$.scrollTo( '#services', 8000, {easing:'elasout'} );">services</a>
<a href="#" onclick="$.scrollTo( '#contact', 8000, {easing:'elasout'} );">contact</a>
</ul>
</div>

</body>

devnull69

12-27-2010, 07:54 AM

Two things I have in mind

The scrollTo is referring to an id rather than the usual name attribute for hash jumps
Make sure you "return false" when using anchor tags with onclick handlers

11va17bene

12-27-2010, 03:46 PM

Thanks for the reply, like I said, I am completely new with javascript.

Two things I have in mind
The scrollTo is referring to an id rather than the usual name attribute for hash jumps
-is there any way I can fix this?
Make sure you "return false" when using anchor tags with onclick handlers
-where do I put the return false, in the actual javascript file or somewhere in the script in the head or in the link that holds the link?

SB65

12-27-2010, 04:28 PM

I can't see anything wrong with the code you've posted, assuming of course you've also got elements with matching ids to actually scroll to.

Have you checked that your paths to jQuery and to the scrollTo plugin are correct, and that the files exist on your server?

11va17bene

12-27-2010, 04:42 PM

I put the two scripts in a js folder in the root folder that holds all the files for my site, i dont know if it is finding this. This is what the code looks like in my body when you click the link you should pop down to this anchor, am I doing this part wrong possibly? I just want the person to click about at the navigation and be scrolled down to this part, is this really so difficult? The back to top part doesn't have animation to it it just pops up to the top so the script is not working at all.

<div id="content">
<div id="about">
<a name="anchor1"></a>
<h1>About</h1>
<h2>Information about me </h2>
<a href="#" onclick="javascript:ScrollWin.scroll('0'); return false;">top</a>
</div>

11va17bene

12-27-2010, 04:43 PM

SB65

12-27-2010, 04:53 PM

The div's fine, all you need is an element with id of about

Can you give a link to a live page?

devnull69

12-27-2010, 05:11 PM

To make myself clear: All you need to do is to take the code you posted first, add a "return false" to all onclick handlers

onclick="$.scrollTo( '#about', 8000, {easing:'elasout'} ); return false;"

and make sure that elements (divs) with the corresponding id's (like id="about") exist on the page

SB65

12-27-2010, 05:16 PM

The absence of return:false here would not prevent the scroll happening. The OPs code has no default action in any case since the links are set with href="#".

There must be some other issue, which is why it would help to see a live page.

devnull69

12-27-2010, 05:43 PM

The default action for an empty hash anchor "#" is "jump to the top of the page" which is exactly not supposed to happen here

SB65

12-27-2010, 05:47 PM

Using the OP's code, unchanged except for the addition of an appropriately id'd div, the scroll works fine.

devnull69

12-27-2010, 06:07 PM

EDIT: Ok, I used jsbin.com to test the page ... and it uses frames. As soon as the code runs inside a frame, the # default action will make the page jump before the animation has finished.

But using it as a "normal" page it works fine

SB65

12-27-2010, 06:18 PM

I see different behaviour on a test page here (http://www.simonbattersby.com/test/scroll.htm#), using FF3.
Ah, reading your post again I see what you mean, sorry.

11va17bene

12-27-2010, 08:53 PM

I had my scripts in the wrong place, they were with my css styles I had to move them out of the style and it worked. Thanks everyone for your help.