AJAX скролит элемент наверх

373

03 ноября 2017, 10:40

Привет, на протяжении долгого времени долблюсь с AJAX. Есть что-то на подобие чата. Проблема заключается в том, что сообщения из БД выводятся посредством AJAX каждые 10 секунд. Эти сообщения выводятся в блок .content Когда происходит очередной AJAX запрос этот блок .content скролится наверх. Как убрать этот скролл?

function show()
{
    $.ajax({
        url: "includes/vivod.php", // Путь к php скрипту который будет загружать заголовки
        cache: false,
        success: function(html){
            $(".content").html(html); // Блок куда будем выводить информацию
        }
    });
}
$(document).ready(function(){
    show();
    setInterval(show, 10000); // Интервал обновления в миллисекундах      
});

Answer 1

function scrollToBottomChat() {
  $('.content')[0].scrollTop = $('.content')[0].scrollHeight;
}
function show() {
  $.ajax({
    url: "includes/vivod.php", // Путь к php скрипту который будет загружать заголовки
    cache: false,
    success: function(html){
      $(".content").html(html); // Блок куда будем выводить информацию
      scrollToBottomChat(); // После обновления скроллим
    }
  });
}
$(document).ready(function(){
  show();
  setInterval(show, 10000); // Интервал обновления в миллисекундах      
});

У вас не происходит скролл наверх, у вас просто полностью обновляется содержимое .content и он имеет по дефолту нулевой скролл.