Using ScrollTo with Jquery

JavaScript
1

I am trying to implement the scroll to effect for anchor jumping. I have taken the scripts and inserted them correctly… I think but still nothing.

Here is the link:
Grubbs Pharmacy Logo Ideas

This is the site I got the scripts from:
Animated Scrolling for Same-Page Links » Learning jQuery - Tips, Techniques, Tutorials

Can someone please help me get this working.
Thanks

2

Never seen that before, try the following plugin which includes the latest release and the jQuery 1.4.2 release but it should work fine with jQuery 1.5.1.

Ariel Flesler: jQuery.ScrollTo

3

Ok I have tried using your instructions and still haven’t got it working.

Check my source on each version:

Grubbs Pharmacy Logo Ideas
Grubbs Pharmacy Logo Ideas

On the first one I thought maybe I could apply the same scrollTo() to all a tags as I don’t need to get as complicated as your demo.

The second I tried putting them all inline like the demo but still no luck.

I’m still a newbie to JS so please pardon my inexperience.
Thanks for your help

4

I would love some help on this as well. The plugin looks awesome, but the “documentation” is horrible… all of the examples are very skeletal code snippets that don’t really explain how to do any of the method calls.

Any help in this area would be appreciated.

I am trying, for example, to do :

$.scrollTo(‘800px’);
or
$(‘#mydiv’).scrollTo(‘#anotherDiv’);

etc. etc… not getting anything. Some very simple docs explaining the basic way of making it work would be splendid. Very useful plugin from what I can see.

5

seems others are having this problem as well, from looking at the forums. I just need to know the BASICS of how to get it to work at all.

6

Does the demo page provide enough of the basics with which to help you out with?

7

@paul

The demo page is part of what I’m having a problem with. The examples look great But the code is all small snippets that don’t give a larger view of what’s going on.

For example, I"ve included the jQuery source in my documents (I reference it locally), been using jQuery for about a month now, with no problem. I also downloaded and include the jQuery scrollTo plugin…

All i’m doing it dynamically creating a div and then I want JQuery to scroll to the new div once it’s created… but I can’t seem to make any scrolling happen at all.

Here is my full code:

<!DOCTYPE html>
<html lang=“en”>
<head>
<meta charset=“utf-8”>
<title>Welcome to j</title>
<script src=“jQuery/jquery-1.4.2.js”></script>
<script src=“jQuery/jquery-ui.js”></script>
<script src=“jQuery/jquery.scrollTo-1.4.2-min.js”> </script>

<script type=“text/javascript”>

function transform(){

$('&lt;div id="newdiv" align="left"&gt;&lt;img src="images/start.png"&gt;&lt;/div&gt;').prependTo('#innerchanger');

}

function scrolli(){
$(‘#innerchanger’).scrollTo($(‘#newdiv’,0));

}

</script>

<link href=“css/style.css” rel=“stylesheet” type=“text/css”>
</head>
<body>

<div id=“changer” align=“left”><div id=“innerchanger” align=“left”><img src=“images/start.png” align=“left”></div></div>

<div class=“words”>
<p>Testing ground. </p>
<p> </p>

&lt;input type="submit" name="boom" id="boom" value="Submit" onClick="transform()"&gt;
&lt;input type="submit" name="boomer" id="bommers" value="scroll" onClick="scrolli()"&gt;

<p> </p>
<p><a href=“#” onClick=“transform()”>transform </a></p>
<p> </p>
<p> </p>
</div>

<p> </p>
</body>
</html>

8

Is the #innerchanger element a scrollable element, or are you instead wanting to scroll the screen to a certain location?

If the latter, the project page says:

If you need to scroll the window (screen), then use:

$.scrollTo(...);//the plugin will take care of this
9

innerchanger is not a scrollable element…

innerchanger is a div within the changer div.

Changer IS scrollable. I see, maybe you’re helping me see what’s wrong…

basically i have a scrollable element called changer, with divs inside. Every time I add a new div, I want the changer element to scroll to “reveal” the new div that’s been added inside.

I’m using the jQuery appendTo function to keep dumping new divs in there.

10

here is the css for the changer element:
#changer {

position:relative; 
left:100px;
top:100px; 
background-color:#9C0;
width: 500px;
height:310px;


 
overflow:scroll !important; 
float:left; 
display: inline-block; 
white-space: nowrap;

}

and here is how I’m calling the scrollTo now:

function scrolli(){
$(‘#changer’).scrollTo($(‘#newdiv’,0));

}

yet, the scrolli ( ) function is indeed being called, but no movement at all is happening.

11

So if the changer div is what you want to scroll, you would instead want to use the following type of code:

$(‘#changer’).scrollTo(…)

Where the part in the scrollTo parenthesis contains the target location of where you want to scroll to.

12

OK, I see the problem now.

Apparently, you can’t “scroll to” an object that has been dynamically generated on the page. Well, you probably CAN, but not the way I’m doing it. If I DON’T dynamically generate the new div, then I am able to scroll to it using the function. It just jumps right to it without scrolling smoothly, but I’m sure that’s an easy fix.

At any rate, that feedback was very helpful. I have the basic scroll to working now, just need to figure out how to make it scroll to dynamically generated items, which should be just a simply matter of doing some research.

thanks for pointing me in the right direction !

13

You can pass the dynamically generated item to the scrollTo method, so that it knows exactly what to scroll to.

You should know though that unique identifiers must be unique. It’s invalid to have multiple elements with the same identifier.

14

Yeah, I am going to change it so that multiple divs generated will each have a unique number. For now I was just generating one. I will probably append a number to the end of each id name to make them all unique.

I will also try passing the generated items to the scrollTo method as well.

thanks for the help, man… you rock