css animation moves page – fix page scroll position on current element with css?

Programming in javascript: css animation moves page – fix page scroll position on current element with css? on newest questions tagged javascript – Stack Overflow

Given the following simplified problem:

foreach i in 1..100 do
    <div onclick="$("div").attr('class','expand');">block i</div>

And this css:

div {
    height: 20px;
    transition: height 0.5s;
}

div.expand {
    height: 50px;
}

Now when I click on a div, every div get’s the class “expand”. This means that the page will expand. However, everything will scroll down. That means that if I click on div 50, it will probably not be in my window anymore and I have to scroll down to see it again.

I would love to make the div that I clicked on stay in the center of the screen. Is this possible with CSS, or do I need JS?

source: http://stackoverflow.com/questions/11361628/css-animation-moves-page-fix-page-scroll-position-on-current-element-with-css
Programming in javascript: programming-in-javascript