и снова scrollTo
 

Доброго времени суток!
Не работает scrollTop, может быть кто-то сталкивался, код:

//работает со старой версией jQuery
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>

//не работает с новой версией
//<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>



<script type="text/javascript">
            function myFu() {
                $('#content').append('<p>aaaaaaa</p>');
                $("#content").animate({ scrollTop: $("#content").attr("scrollHeight") - 20 }, 'normal');
                return false;
            }
</script>

        <a href="#" onclick="myFu();">aaaa</a>

<div id="content" style="position: fixed;bottom: 0px; height:250px; bottom: 0px; overflow:auto;border: 1px solid black; width: 99%">
                <p style="padding-bottom:10px;">123</p>
                <p style="padding-bottom:10px;">123</p>
                <p style="padding-bottom:10px;">123</p>
                <p style="padding-bottom:10px;">123</p>
</div>

При нажатии на ссылку добавляется элемент в див и прокручивается вниз. Со старыми версиями jquery это работает, с новыми отказывается.
Во всех рабочих документациях участвуют старые версии jQuery.
Просто на этот див мне нужно навесить еще ресайзабл, а он со старыми версиями не работает, меж двух огней оказался.
Гуру помогите, спасибо.

попробуй так

<script type="text/javascript">

function myFu() {
$('#inner').append('<p>aaaaaaa</p>');
$("#content").animate({ scrollTop: $('#inner').height() }, 500);

}

</script>

<a href="#" onclick="myFu();return false">aaaa</a>

<div id="content" style="position: fixed;bottom: 0px; height:250px; bottom: 0px; overflow:auto; border: 1px solid black; width: 80%">
<div id="inner">    
<p style="padding-bottom:10px;">123</p>
<p style="padding-bottom:10px;">123</p>
<p style="padding-bottom:10px;">123</p>
<p style="padding-bottom:10px;">123</p>
</div>
</div>

Специально же подробно написал

//работает со старой версией jQuery
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>

я привел аналогичный рабочий пример. Если подключить новую библиотеку jQuery, например,

//не работает с новой версией
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>

,

то не работает. Использование старой библиотеки меня не устраивает, потому что используются вещи, которые не работают со старой версией (например, resizable)

ОУУ ) нет, это мои криворуки ) действительно, так работает!

так мой вариант работает в новой версии, разве не это тебе надобно?

Сорри, так я тоже делал ) рассказываю шаг 2 ) Подключаем ресайзабл элемента. Казалось бы, что всё получилось, наш див ресайзится, при добавлении элемента скроллинг уходит вниз. Но после одного добавления через .append() див перестает ресайзится.
Аналогичный результат я получил в первом посте подключая библиотеку версии

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"></script>

смотрим:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />

function myFu() {
$('#inner').append('<p>aaaaaaa</p>');
$("#content").animate({ scrollTop: $('#inner').height() }, 500);
$("#content").resizable({ animate: true, handles: 'n' });//это должно быть, чтобы после каждого добавления контента оставалась возможность ресайза
}


</script>

<a href="#" onclick="myFu();return false">aaaa</a>

<div id="content" style="position: fixed;bottom: 0px; height:250px; bottom: 0px; overflow:auto; border: 1px solid black; width: 80%">
<div id="inner">    
<p style="padding-bottom:10px;">123</p>
<p style="padding-bottom:10px;">123</p>
<p style="padding-bottom:10px;">123</p>
<p style="padding-bottom:10px;">123</p>
</div>
</div>


<script>
//это чтобы при загрузке работало
$(document).ready(function () {
        $("#content").resizable({ animate: true, handles: 'n' });
    })
</script>

Разобрался, просто ползунок ресайза уходил вверх, он не пропадал, а надо было перемотать скроллинг вверх, тогда можно было ресайзить. Я обернул все внутренности в еще один див и подставил коррекцию высоты. Всё работает, всем спасибо!

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />

function myFu() {
$('#inner').append('<p>aaaaaaa</p>');
$("#content").animate({ scrollTop: $('#inner').height() }, 500);
$("#content").css("height", "100%");//вот она, рыба моей мечты
}


</script>

<a href="#" onclick="myFu();return false">aaaa</a>

<div id="outer" style="position: fixed;height:250px; bottom: 0px; border: 1px solid black; width: 99%">
<div id="content" style="overflow:auto;border: 1px solid black; width: 100%">
<div id="inner">    
<p style="padding-bottom:10px;">123</p>
<p style="padding-bottom:10px;">123</p>
<p style="padding-bottom:10px;">123</p>
<p style="padding-bottom:10px;">123</p>
</div>
</div>
</div>

<script>
//это чтобы при загрузке работало
$(document).ready(function () {
        $("#outer").resizable({ animate: true, handles: 'n' });
    })
</script>