scorrimento della chat in ordine ascendente

[Ciakko]

Buongiorno, ho creato una chat su db, vorrei che l'ordine di visualizzazione fosse ascendente ma ho il problema che la barra non scorre automaticamente verso il basso così devo scendere ogni volta che c'è un nuovo messaggio.
La chat è semplice, si compone di un input nella homepage che manda i dati ad una pagina in iframe passando per il database.
Ho fatto molti tentativi, ognuno funzionante ma con un problema. Alla fine mi sono fermato su questa strada: funzione animate che porta la mia pagina ad un'ancora a fondo chat. Il problema è che ad ogni refresh della chat la barra torna verso il basso ed è impossibile per l'utente andare a leggere i messaggi vecchi.
Questo è il codice

$(document).ready(function(){
 setInterval(function(){
 $("#ref").load(location.href+" #ref");
 $('html, body').animate({ 
    scrollTop: $(ancora)
    .offset().top - 0});
 },2000);
 });
</script>

#ref è la lista della chat.
C'è un modo per bloccare lo script dal momento che l'utente usa la barra?
Qualche consiglio?
Grazie mille

[Ciakko]

Ho creato una condizione allo scroll della pagina che avvii la funzione, non riesco però a creare una funzione inversa e neppure riesco a trovare un evento da legarci. Aiuto please!!

function Scroll(){
 $(window).scroll(function(){
 var a = $(this).scrollTop();
 var b = $('#ancora').position().top;
  if (a <= b){
  $('html, body').animate({scrollTop: $('#ancora').offset().top});
  }
});
};

function Stop(){
......
 };

<form id="ref" enctype="multipart/form-data" method="post" onmouseout="Scroll()" onmouseover="Stop()">

Un qualcosa onscroll della pagina? No, perché va ad interferire con animate.
Un cambio di qualche parametro?

[cavicchiandrea]

Non saprei come risolvere, ma peso che sia la strada più contorta e l'abbandonerei. Mi concentrerei lato server eseguendo la query del db con l'ordine che vuoi ascendente o discendente.

[Ciakko]

Ciao, è già in ordine ascendente. Il problema sono i messaggi che restano nascosti.
Sto pensando di agire sull'ultimo elemento della lista. Ogni aggiornamento rende quell'elemento unico.
Cosa potrei dirgli? E come indico in js li:last?

[Ciakko]

Ho un'idea ma non so come tradurla in codice.
Pensavo di trovare l'altezza del mio ultimo elemento in lista, qualcosa come:

var altezza = $( "li:last-child" ).height();

poi sposto la posizione del mio contenitore verso l'alto di questo valore.
Ma come?

<form id="ref">
   <ul id="chat">
    <li>....</li>
    <li>....</li>
  </ul>
</form>

[Ciakko]

YEAH!!!!! Sono stra felice e felice di aiutare qualcuno che passerà di qui.
Ecco come ho fatto:

1) Ho aggiunto un'ancora in fondo alla chat e vi ho puntato l'iframe della pagina chat. Così ad ogni invio del messaggio la pagina recuperava l'ancora. Gli altri utenti però avevano i miei messaggi coperti.

2) Ho trovato l'altezza dell'ultimo messaggio inviato ed ho portato verso l'alto il contenitore della chat di questo valore. Ho temporizzato lo script in modo che lo ricalcolasse e voila:

<script type="text/javascript">
$(document).ready(function(){
 var altezza = $( "li:last-child" ).height();
 $("#ref").css({ top: -(altezza) });
 setTimeout(arguments.callee, 1000);
});
</script>

[Ciakko]

Ultimissimo aggiornamento: ho rimosso il div ancora e dato l'id ancora all'ultimo elemento in lista, così è molto più pratico nel caso si scrivessero messaggi molto lunghi.

document.querySelector ("li:last-child").id = 'ancora';

[Ciakko]

Riapro questa discussione perché ho un nuovo problema. Ho tolto la mia chat dalla pagina iframe, ora è nella homepage. Quando era in iframe aveva aggiunto al link un'ancora così che puntasse subito all'ultimo messaggio in basso e ad ogni aggiornamento recuperasse la posizione.
Ora ho il problema che non posso aggiornare la home, neppure una parte, facendola puntare all'ancora perché diventa impossibile fare qualsiasi operazione. Cosa posso fare per aggiornare la mia div e farla scendere all'ancora senza precludere l'utilizzo della barra di scorrimento da parte dell'utente?

Questo è quello che ho provato:

$(document).ready(function(){
 window.location.hash = '#ancora';
 $("#chat_ref").load(location.href+" #chat_ref");
 setTimeout(arguments.callee, 2000);
});

<form id="chat_ref" enctype="multipart/form-data" method="post">
 <ul class="chat" id="chat_list">  
  <?php
   
   $sql="SELECT * FROM chat_home ORDER by id ASC";
   $dati=mysql_query($sql);
   $ultimo_id = mysql_result(mysql_query("SELECT MAX(id) FROM chat_home"), 0);
   while($chat_row=mysql_fetch_assoc($dati))
    {     
     
    $query="SELECT * FROM `personaggi` WHERE id='".$chat_row['id_eroe']."'";
    $trovato=mysql_query($query);
    $nick=mysql_fetch_assoc($trovato);
     if ($chat_row['id'] & 1)
      {  
      ?>
      <li class="dispari" <?php if($chat_row['id'] == $ultimo_id) echo 'id="ancora"'; ?> >
       <!--<button class="chat_cancella" type="submit" formaction="chat_home.php?cancella&id=<?php echo $chat_row['id']; ?>"><img src="../images/icone/cancella.png" title="cancella" alt="cancella"/></button>-->
       <div class="chat_time"><?php echo $chat_row['data'] ;?></div>
       <div class="chat_divide"> - </div>
       <div class="chat_nick"><?php echo $nick['nome'].' :' ;?></div>
        <?php
        if($opzione['chat_avatar'] == sì)
         {
         ?>
         <div class="chat_avatar">
         <img src="<?php echo 'db/getimag.php?id='.$nick['id'] ;?>" alt="No image" />
         </div>
         <?php
         };
         ?>
       <div class="chat_text"><?php echo $chat_row['testo'];?></div>
      </li>
      <?php
      }
     else
      {
      ?>
      <li class="pari" <?php if($chat_row['id'] == $ultimo_id) echo 'id="ancora"' ;?> >
       <!--<button class="chat_cancella" type="submit" formaction="chat_home.php?cancella&id=<?php echo $chat_row['id']; ?>"><img src="../images/icone/cancella.png" title="cancella" alt="cancella"/></button>-->
       <div class="chat_time"><?php echo $chat_row['data'] ;?></div>
       <div class="chat_divide"> - </div>
       <div class="chat_nick"><?php echo $nick['nome'].' :' ;?></div>
       <?php
        if($opzione['chat_avatar'] == sì)
         {
         ?>
         <div class="chat_avatar">
         <img src="<?php echo 'db/getimag.php?id='.$nick['id'] ;?>" alt="No image" />
         </div>
         <?php
         };
         ?>
       <div class="chat_text"><?php echo $chat_row['testo'];?></div>
      </li>
      <?php
      }; 
    };
  ?>
 </ul>
 
<script type="text/javascript">
var altezza = $("#ancora").height();
$("#chat_ref").css({top: - (altezza)});
</script>
</form>