Scrolling dynamique type googlevideos

Tu peux utiliser le plugin scrollTo pour JQuery
http://demos.flesler.com/jquery/scrollTo/

Salut,
merci pour le lien, mais j'ai l'impression que ce script est payant... :(

Non, c'est gratuit.

bonjour,
effectivement, c'est gratuit :)

Bon cela fait 2 jours que j'essaye de le faire fonctionner, mais sans succès. La documentation n'est pas des plus claire, du moins pour moi. Je n'arrive pas à trouver d'explication claire, quelqu'un saurait-il m'aider ?

Page test : http://www.jbbourgeois.com/test.php

voici mon code (simplifié pour page de test) :


TEST.php
<!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 src="functions.js" type="text/javascript"></script>
<script type="text/javascript" src="include/jquery-1.3.1.min.js"></script>
<script type="text/javascript" src="include/jquery.scrollTo.js"></script>
<script type="text/javascript" src="include/jquery.scrollTo-min.js"></script>

<script type="text/javascript">
function scroll(){
$('#conteneur').scrollTo( '+=150px' );
}
</script>

<style type="text/css">
<!--
#conteneur {
background-color: #09C;
height: 100px;
width: 70px;
}
-->a
</style>
</head>

<body><a href="#" onclick="scroll()" >clic to scroll</a>
<iframe id="conteneur" src="testiframe.php" scrolling="no" frameborder="0"></iframe>
</body>
</html>

TESTIFRAME.php
<!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>
<style type="text/css">
<!--
ul {
margin: 0px;
padding: 0px;
}
-->
</style>
</head>

<body>
<ul>
<li>ligne1</li>
<li>ligne2</li>
<li>ligne3</li>
<li>ligne4</li>
<li>ligne5</li>
<li>ligne6</li>
<li>ligne7</li>
<li>ligne8</li>
<li>ligne9</li>
<li>ligne10</li>
<li>ligne11</li>
<li>ligne12</li>
<li>ligne13</li>
<li>ligne14</li>
<li>ligne15</li>
<li>ligne16</li>
<li>ligne17</li>
<li>ligne18</li>
<li>ligne19</li>
<li>ligne20</li>
</ul>
</body>
</html>

Au passage, j'utilise une ifrmae parce que je n'ai pas réussit à le faire fonctionner dans une balise div..

srollTo() est une méthode déjà dans Javascript sur certains objets.
Il faut donc l'appeler sur l'objet qui n'a pas cette méthode par défaut (sauf maintenant avec le plugin) : JQuery

$.scrollTo( '#conteneur', 150);