jQuery.ScrollTo : Problems Implementing - Page 2

gsprague · 03-16-2009, 10:25 PM

Has anyone actually got this working properly with animation?

carana · 05-04-2009, 08:10 AM

I see a little difference, you put the code into the onclick tag but i put it into the title, try this:

Code:

<a title="$.scrollTo( '#productora', 800, {easing:'elasout'} );" href="#productora"onClick="DHTMLSound('sounds/click.mp3')" >La Productora</a>

you can see how it works here

edn · 06-05-2009, 12:00 AM

Hi,

I am using this plugin to act as a scroll to top of page function, but despite trying all of these things, it's still just jumping to the top of the page (even when i tweak the duration) I also tried it with different elements on the page, and it's still just a plain jump.......

I don't know if this is affecting it or if there's a way to get rid of this, but once i click the button the hash shows up in the URL.....Thanks!! Here are the basic elements I'm using:

target div at top of page:

<div id='menu-1'>
<div class='section-menu-1' style="cursor

ointer" onclick="tinker('top-menu');">this is the target element at page top
</div>
</div>

and then the button:

<div style="padding-top:80px;padding-bottom:80px;text-align:center;font-size:14px">
<a href='#' onclick="$.scrollTo( '#menu-1', 8000, {easing:'elasout'} ); return false;">back to top</a>
</div>

lastlife · 06-08-2009, 07:17 PM

I found this threat after suffering from the same defects as you all above.
I have linked jquery as well as the .scrollTo.js file in my html file.
My links manage to jump to the correct #div, but no animation!!! What gives?!

I am also new the the javascript/JQuery game but am good at following orders. I just cannot figure this one out.

Here is my test page:
http://www.lastlifegraphics.com/jqueryfun/scrollTo.html

Any advice would be grand! thank you in advance.

- j

Buck · 06-16-2009, 10:29 AM

Hi,

if you want to use the 'easing.elasout' function you need to define it first in the html <head> section as NancyJ stated earlier in this thread:

Code:

<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>

Change the 'title= ...' to 'onclick= ..."

Code:

<a href="#target-examples" onclick="$.scrollTo( '#target-examples', 8000, {easing:'elasout'} );">

to see how it works without the 'easing.elasout':

Code:

<a href="#target-examples" onclick="$.scrollTo( '#target-examples', 2000 );">

Hope it helps!

ilujahn · 07-17-2009, 08:22 AM

Hey guys,

I spent many hours yesterday on this plug-in to make it work, but no luck. This morning I did it

Use jQuery 1.3.2, not 1.2.6, and scrollTo 1.4.2, not 1.4.0.

With the combination of jQuery 1.2.6 and scrollTo 1.4.0 nothing happened. I know I wrote the code correctly because I am very familiar with jQuery (even wrote plug-ins of my own).

So, use jQuery 1.3.2 and scrollTo 1.4.2. It worked for me.

Hope it helps.

Sloth86 · 09-09-2009, 06:32 PM

Hey can anyone help me out? i know these post are kind of old but if anyone is still reading them can you please help me out? when i run the code firebug tells me what the issues are but i cant really figure out how to fix it. it says jquery is not defined ... i think i've followed the demo to a T and even looked their source code to see what my problem was, and i guess I'm just missing some thing. if anyone could help id appreciate it .

Fumigator · 09-09-2009, 07:58 PM

Heya Sloth86,

Perhaps you could start a thread that describes your problem in full, including what code you've tried, and maybe even a link to your page that has the problem.

While you're at it, read the guidelines first:

http://www.codingforums.com/postguide.htm

Sloth86 · 09-09-2009, 09:40 PM

Thanks Fumigator ill do that now.

naseem · 12-09-2009, 01:04 PM

Hy, just registered, I'm having some problem with the plugin as well, you can see code and problem at this page (work in progress), www.silentbreeze-yurt.com , what happens in firefox and some other browsers as well is that when the button up is pressed for a moment it blinks the header of page and then back to the movement ftom bottom up to top page, it's as if the link is followed first and then the plug in enters and perform the task afterwords, please help

Spudhead · 12-09-2009, 03:14 PM

Hi naseem - you might want to read Fumigator's post a couple of posts above yours

Quote:

Originally Posted by Fumigator

Heya Sloth86,

Perhaps you could start a thread that describes your problem in full, including what code you've tried, and maybe even a link to your page that has the problem.

While you're at it, read the guidelines first:

http://www.codingforums.com/postguide.htm

Sputnik1 · 03-12-2011, 12:58 PM

Kempobot, you're a saviour. I've spent a week trying to implement Flesler's ScrollTo script. It's a fantastic script but his instructions leave JavaScript beginners like me quaking at the knees.

Yours was the only step-by-step instruction I could find, so thank you very much!

I was wondering if you (or anyone ) could help with something.
I need to queue the x-axis and y-axis motion. Some links will scroll first x, then y, others will do the opposite. This is what my link looks like:

Code:

<a onclick="$.scrollTo( '#C5', 2000, {queue:true}, {axis:'xy'}, {easing:'swing'} );" href="#">MyLink</a>

Here is a stripped down version of my page.

The scrolling works okay but the x/y axis separation doesn't. There's probably something really silly that I missed.
Also I've noticed strange behaviour. Firstly, there is a rapid flash that happens just as the scrolling starts. Secondly, if I click on a link, and then click on another befor the scrolling has stopped, it sems to try follow the "#" href. and then shoots off to the wrong place.

I included this JQuery easing script from this website which seems quite popular. Could that be the problem? I'm using Firefox V3.6.15.

Any help would be hugely appreciated!

Sputnik1 · 03-12-2011, 02:42 PM

Oops, my original post was at the end.
Kempobot, you're a saviour. I've spent a week trying to implement Flesler's ScrollTo script. It's a fantastic script but his instructions leave JavaScript beginners like me quaking at the knees.

Yours was the only step-by-step instruction I could find, so thank you very much!

I was wondering if you (or anyone ) could help with something.
I need to queue the x-axis and y-axis motion. Some links will scroll first x, then y, others will do the opposite. This is what my link looks like:

Code:

<a onclick="$.scrollTo( '#C5', 2000, {queue:true}, {axis:'xy'}, {easing:'swing'} );" href="#">MyLink</a>

Here is a stripped down version of my page.

The scrolling works okay but the x/y axis separation doesn't. There's probably something really silly that I missed.
Also I've noticed strange behaviour. Firstly, there is a rapid flash that happens just as the scrolling starts. Secondly, if I click on a link, and then click on another befor the scrolling has stopped, it sems to try follow the "#" href. and then shoots off to the wrong place.

I included this JQuery easing script from this website which seems quite popular. Could that be the problem? I'm using Firefox V3.6.15.

Any help would be hugely appreciated!