Necesito mantener una página desplazada a la parte inferior HASTA que el usuario realice una copia de seguridad

Ok, aquí está mi situación:

He estado trabajando en un sitio web de tipo sala de chat para un proyecto paralelo / hobby. El diseño actual utiliza marcos html. El marco inferior es el marco de “pie de página” o “entrada de mensaje”. El marco superior es donde se muestran los mensajes públicos. Yo uso ajax para actualizar el marco superior cada segundo. Funciona bien. Mi problema es este:

Necesito poder mantener el marco superior desplazado hasta el final. A MENOS QUE el usuario se desplace hacia atrás para ver los mensajes antiguos, por ejemplo. Actualmente tengo una función que la mantiene desplazada hacia abajo hasta el final, pero cada vez que ajax actualiza la página, la obliga a regresar a la parte inferior, por lo que no puedo desplazarme hacia arriba por más de un segundo, y es realmente frustrante. . He buscado una solución, pero no he encontrado ninguna que realmente funcione para mí. La función que utilizo para desplazarme a la parte inferior es la siguiente:

function jumpToPageBottom() { $('html, body').scrollTop( $(document).height()); } 

Hace su trabajo, pero una vez más, lo necesito para dejar de forzar la página al final si un usuario se desplaza para ver los mensajes más antiguos.

ACTUALIZACIÓN –

Debería aclarar, estoy usando marcos reales, en lugar de un iframe. Mi código de página “índice” es:

     

Y el código que actualiza mis mensajes de chat es:

  function jumpToPageBottom() { $('html, body').scrollTop( $(document).height()); } $(function() { startRefresh(); }); function startRefresh() { setTimeout(startRefresh,1000); $.ajax({ url: 'api.php', //the script to call to get data data: "", //you can insert url argumnets here to pass to api.php //for example "id=5&parent=6" dataType: 'json', //data format success: function(data) //on recieve of reply { //-------------------------------------------------------------------- // 3) Update html content //-------------------------------------------------------------------- $('#output').html(data); //Set output element html jumpToPageBottom(); } }); };  

¿Es así de refrescante un mal enfoque? ¿Es la forma en que se actualiza el div causando algunos de mis problemas? Soy nuevo en todo esto (obviamente), por lo que cualquier consejo sería muy apreciado.

La lógica básica que necesitas es:

 var wasAtBottom = isAtBottom(); $('#output').html(data); if (wasAtBottom) { jumpToPageBottom(); } 

Con isAtBottom siendo de esta respuesta :

 function isAtBottom() { return $(window).scrollTop() + $(window).height() === $(document).height(); } 

Aquí hay una demostración de trabajo para usted: http://jsfiddle.net/9q17euuo/2/