Анимация высоты элемента, проблема со скроллингом
 

Есть пачка div, при клике анимируется высота (раскрывается на величину окна) и выполняется скролл до выбранного элемента. На первый взгляд работает нормально, но при прокрутке блоки начинают раскрываться вверх. Вследствии чего блок раскрывается, но вот скролл выполняется до верхушки блока в сложенном состоянии.

Вот ссылка на демку: http://irrodion.ru/portfolio/

кусок html:

<div id="pageWrap">
<?php
for($i = 1;$i <= 10;$i++)
{
echo '<div class="content" id="'.$i.'"></div>';
}
?>
</div>

javascript:

$(document).ready(function()
{
$(".content").each(function()
{
var id = "#"+this.id;
if(id == "#1")
{
$(id).css({'height':'150px'});
}
});

//Собственно обработка клика
$(".content").click(function()
{
var id = "#"+this.id;
var selectedId = id;
openContent(id);
scrollToContent(id);
$(".content").each(function()
{
var id = "#"+this.id;
var height = $(id).height();
if(height > 150 && id != selectedId)
{
closeContent(id);
}
});
});

});

//Функции
function openContent(id)
{
var height = $(window).height();
$(id).animate({'height':height}, 500, 'swing');
$(id).css({'cursor':'default'});
}

function closeContent(id)
{
if(id == "#1")
{
height = "150px";
}else
{
height = "100px";
}
$(id).animate({'height':height}, 500, 'swing');
$(id).css({'cursor':'pointer'});
}

function scrollToContent(id)
{
$('html, body').animate({scrollTop:$(id).position().top}, 500, 'swing');
}


Конечно, можно запустить функцию scrollToContent в callback анимации, но тогда возникает пауза перед прокруткой, что нежелательно.

Искал на форумах, наших и буржуйских, похожей проблемы не нашел. Подозреваю что нужно отслеживать offset и каким-то образом прикрутить его значения к скроллу, но пока не хватает опыта. Заранее спасибо за помощь!

По сути тебе нужно скроллить к position().top() - (previousBlock.height() - previousBlock.collapsedHeight())


collapsedHeight - такой функции нет, вместо нее ты подставляешь свои 100 | 150 пикселей.

function scrollToContent(id)
{
var height = $(window).height();
$('html, body').animate({scrollTop:$(id).position().top-(height-100)}, 500, 'swing');
}

Если сделать так, то получается всё в точности наоборот. Теперь если блок раскрывается вверх - всё в порядке, вниз - скорлл улетает вверх.

Этот код не имеет ничего общего с моим комментарием :)

Допёр, все заработало как надо, но иногда все равно пролетает вниз, хм. Спасибо большое!