ScrollTop ne fonctionne pas !

parousky Messages postés 325 Date d'inscription   Statut Membre Dernière intervention   -  
 Kalo -
Bonjour, j'ai un div dans lequel j'affiche du texte, et pour qu'il garde une taille fixe, je lui ai mis l'attribut overflow: auto pour faire apparaître les scrollers quand il y a trop de texte.
Et j'aimerais scroller automatiquement dans le div pour le faire aller en bas.
Alors j'ai écris ce code là :


$("#commentaires").scrollTop($("#commentaires")[0].scrollHeight);

Où commentaires est l'id de mon div.
Mais ça ne fonctionne pas !

J'ai aussi essayé ça :

$("#commentaires").scrollTop(400);


Juste pour essayer, et ça ne fonctionne toujours pas !
Voyez-vous une erreur dans mon code ?
Merci d'avance !

2 réponses

kalo
 
essayes avec cet exemple:

http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_css_scrolltop_set

c'est peut être un problème avec ta librairie jquery... ?
0
parousky Messages postés 325 Date d'inscription   Statut Membre Dernière intervention   6
 
Alors oui effectivement ça fonctionne, mais uniquement lorsque la fonction pour scroller est appelée en cliquant sur un bouton.
J'aimerais bien que cette fonction soit appelée lorsque la page se charge.
Donc j'ai écris :

<script>
function Scroll()
{
$("#commentaires").scrollTop($("#commentaires")[0].scrollHeight);
}
</script>
<body onload="Scroll()">

</body>


Mais là ça ne fonctionne pas ! Je trouve ça très étrange !
Vois-tu un problème ?
0
Kalo
 
j'ai essayé ta version, chez moi ça fonctionne, la barre de scroll du navigateur (firefox) se positionne à la fin...est-ce l'effet que tu recherchais ?

voilà le code que j'ai utilisé:

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
function Scroll()
{
$("#commentaires").scrollTop($("#commentaires")[0].scrollHeight);
}
</script>
</head>
<body onload="Scroll()">

<div id="commentaires" style="border:1px solid black;width:100%;height:400px;overflow:auto">
5 paragraphes générés à partir de http://fr.lipsum.com/
</body>
</html>
0