Utilisation du plugin scrollTo

**Dani91** · 08/02/2012, 17h42

Salut, je souhaiterais utiliser le plugin jquery scrollTo dans un site dont vous verrez ma version de travail ici : http://adulte-adulte.fr/GM
Je n'appelle le plugin que par le lien "collection" pour l'instant et je souhaiterais donc accéder à la div en question par un scroll.
Voici les scripts installés dans le head :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<script type="text/javascript" src="scripts/lib/jquery-1.4.2.min.js"></script>
 
<script type="text/javascript" src="scripts/jquery.scrollTo-1.4.2-min.js"></script>
<script type='text/javascript' src='scripts/init.js'></script>
 
 
<script type="text/javascript">
 
jQuery(function( $ ){
var $paneTarget = $('#pane-target');
 
$('#dom-element').click(function(){
 var target = $paneTarget.find('ul').get(0).childNodes[20];
 $paneTarget.stop().scrollTo( target, 800 );
 
});
 
 
$.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;
};
 
 
$('#absolute-position-hash').click(function(){
 $paneTarget.stop().scrollTo( {top:'5808px',left:'2648px'}, 800 );
 
});
 
$('div.pane').scrollTo( 0 );
// Reset the screen to (0,0) 
$.scrollTo( 0 );
 
 
 });
 
 
</script>

Puis le lien en question dans le body :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<a href="#COLLECTION" id="absolute-position-hash">C O L L E C T I O N</a>

Si quelqu'un pouvait trouver le temps de voir ce qui cloche là dedans ça me rendrait un grand service.
Merci

**Dani91** · 08/02/2012, 18h12

Pour ceux que ca intéresse j'ai trouvé la solution ici :
http://www.codingforums.com/showthread.php?t=149305

(en anglais désolé)

>> Hi, i just registered because I was having the same problem and wanted to give from what I've experienced. The creator has made a beautiful plugin, but does in fact do a lousy job explaining how to implement it.

Here's what you need to do in order to get this to work. I am going to dumb down and retardify this step by step on how to use it. Obviously, the name of the files and links are going to vary, so do not copy and paste them verbatim:

1. Append the scrollTo script to your html like what NancyJ has mentioned. Make sure to place it in the head of your html.

example:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 <head>
<script src="js/jquery.scrollTo-1.4.0-min.js" type="text/javascript"></script>
 </head>

2. Make sure you've downloaded the latest version of jquery and append it to your html's head as well (you should have already done this seeing how scrollTo is an jquery plugin).

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 <head>
<script src="js/jquery-1.2.6.min.js" type="text/javascript"></script>
 <script src="js/jquery.scrollTo-1.4.0-min.js" type="text/javascript"></script>
 </head>

By doing this, from my basic understanding, this is how you make your html read an external javascript file and work with it.

3. Now, with that out of the way, all you need to do in order to make this work is to use an href link in your anchor, and link it to the '#' sign, give it a label, and then close it:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<a href="#">label</a>

4. There appears to be three portions to this command. As NancyJ has mentioned, you are going have to apply this command to the onclick parameter of your anchor link. The first part is going to be your destination. For this example, my destination is going to be a div with an id (hence the '#' before the name) I have named destination. The second part is going to be the amount of time, I believe which is in milliseconds (I'm using 800). The third part is optional, and determines what type of easing animation you want to apply to your transition. I am using the Elastic Ease out (elasout).

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

 <a href="#" onclick="$.scrollTo( '#education', 800, {easing:'elasout'} );">label</a>

And that's it. The plugin does the rest. With this link, my browser should scroll to the div I have named 'destination.' There are other ways you can use this, but I like to have them jump straight to my divs. Obviously, you want to give some spacing and give a distance between your link and your destination.

Hopefully, I have dumbed this down enough to a remedial level to make sense to those who have no idea what they're doing. I, too consider myself a dummy. I would like to believe that I am more artistic individual than a math/programming genius. So, I can feel your pain.

I've tried the plugin without NancyJ's add-on script and it appears to be working okay without it. However, I do believe her add-on script does smooths out the animation a bit. Anyway, hope this helps and good luck.

Bonne continuation

Utilisation du plugin scrollTo

jQuery

Vue hybride

Discussions similaires

Partager

Partager