11548 sujets

JavaScript, DOM et API Web HTML5

[Résolu]Problème ScrollTo

Bonjour, je débute en jquerry et, avant de me lancer dans la réalisation complète de la page que j'ai l'intention de créer, j'aurais aimé avoir un peu d'aide quand à l'utilisation de la fonction scrollTo.

Je n'arrive pas à avoir un effet de survol de la page en cliquant sur le lien qui m'amène au bloc:

(j'ai intégré le javascript et le css directement dans la page)
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script src="jquery.scrollTo-min.js">
</script>
<script type="text/javascript">
$( document ).ready( function() {
	
// Reset all scrollable panes to (0,0)
	$('div.pane').scrollTo( 0 );
	// Reset the screen to (0,0)
	$.scrollTo( 0 );

     
   $('a').click(function(){ 
                                       
     
         
        $.scrollto( '#bloc', 1500, { easing:'elasout' }); 
       
  
});
} ); 
 
</script>
	
<style type="text/css">
#bloc {background-color:#333; height:150px; width:150px; position:absolute; top:25000px; left:35000px;}
a {color:#063;}
</style>
</head>



<body>
<a  href="#bloc">lien1</a>
<div id="bloc"></div>




</body>
</html>


Si quelqu'un pourrait m'éclairer. (J'ai lu la documentation et je dois dire que je ne comprends pas ou indiquer le lien, l'Id, comment reconnaitre le lien en fonction de l'élément...

Merci
Modifié par rubben (15 May 2011 - 08:43)
Bonjour,

Déjà a première vue, tu t'es trompé dans l'appel de ta méthode :
$.scrollto( '#bloc', 1500, { easing:'elasout' });

=>
$.scrollTo( '#bloc', 1500, { easing:'elasout' });

avec un T pas un t.

EDIT : je viens de comprendre ou est ton soucis, tu utilises son exemple,mais le easing:'elasout' est un easing particulié qu'il te faut avoir, sinon il crée une erreur Javascript et donc t'emmène directement au bloc.

Si tu regardes dans la page de démo, il y a un script init.js qui contient la déclaration du $.easing.elasout.


Il te faut télécharger, en plus, le plug-in easing de JQuery : http://gsgd.co.uk/sandbox/jquery.easing.php ( lien tiré de son code init.js )

PS : pour les modérateurs, j'ai un bug, depuis que j'ai répondu au post, je ne vois plus le code Javascript contenu dans le premier post, il a été remplacé par le contenu de la balise <style> en dessous, étrange O_o.
PS2 : Il semble que ça soit aléatoire, quand je recharge la page, une fois sur deux c'est le contenu de la balise <style> qui se "copie" dans la balise <script>...
Modifié par n3k0 (14 May 2011 - 17:58)
Sujet clos
Aller à