Хабр скрол

by Roman

HTML

<body>
<div id="body">

	<div class="quote">
	<div class="actions">
								<a href="/quote/417129/rulez" class="up" rel="nofollow" onclick="v('417129',0,0); return false;">+</a>		<span class="rating-o"><span id="v417129" class="rating">13860</span></span>		<a href="/quote/417129/sux" class="down" rel="nofollow" onclick="v('417129',1,0); return false;">–</a>
		<a href="/quote/417129/bayan" class="old" id="vb417129" rel="nofollow" onclick="v('417129',2,0); return false;">[:||||:]</a>		<span class="share" id="s417129"><span class="b-share"><a class="b-share__handle" id="ya-share-0.5340873752720654-1413780589768" data-hdirection="" data-vdirection=""><span class="b-share__text">Поделиться</span></a></span></span>										<span class="date">2012-05-23 13:12</span> <a href="/quote/417129" class="id">#417129</a>					</div>
	<div class="text">xxx: ХТО ВЗЫВАЛ К ИСТЕНОМУ ВОЕНУ СВЕДА???!!!<br>xxx: ЙА НИСУ РИАЛЬНЕ СВЕД!!!<br>yyy: Александр, у нас лампочка перегорела в 245 аудитории, будьте добры поменять<br>xxx: окей )<br>zzz: паладины уже не те</div>
	</div>

	<div class="quote">
	<div class="actions">
								<a href="/quote/417128/rulez" class="up" rel="nofollow" onclick="v('417128',0,0); return false;">+</a>		<span class="rating-o"><span id="v417128" class="rating">8191</span></span>		<a href="/quote/417128/sux" class="down" rel="nofollow" onclick="v('417128',1,0); return false;">–</a>
		<a href="/quote/417128/bayan" class="old" id="vb417128" rel="nofollow" onclick="v('417128',2,0); return false;">[:||||:]</a>		<span class="share" id="s417128"><span class="b-share"><a class="b-share__handle" id="ya-share-0.25322343967854977-1413780589771" data-hdirection="" data-vdirection=""><span class="b-share__text">Поделиться</span></a></span></span>										<span class="date">2012-05-23 13:12</span> <a href="/quote/417128" class="id">#417128</a>					</div>
	<div class="text">ххх: если надо, я могу горы свернуть<br>ууу: так сверни<br>ххх: а оно мне надо?</div>
	</div>

	<div...

CSS

div#body {
    width: 740px;
    margin: 30px auto;
}
div.quote {
    margin: 30px 0;
    position: relative;
}
div.quote div.actions {
    position: relative;
    line-height: 22px;
    font-size: 9pt;
}
div.quote div.text {
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    background: #f3f3f3;
    border: 1px dotted #bbbbbb;
    font-family: 'Monaco', 'Liberation Mono', 'Droid Sans Mono', 'Ubuntu Mono', 'Lucida Console', 'Helvetica Neue', monospace;
    padding: 7px 8px 5px 8px;
    font-size: 10pt;
    line-height: 1.3em;
}

JavaScript

$(document).ready(function(){
    var topStop = 100;
    var $ex = $('#ex' );
    var $in = $('#in');
    var $inHeight = $in.height();
    $in.css({height:$inHeight});
    $('body').animate({
        scrollTop: ($ex.offset().top - topStop)
    }, 2000, 'swing', function(){
        //Animation complete 1
        $in.animate({
            "top": -($inHeight - $ex.height())
        }, 2000, 'swing', function(){
            //Animation complete 2
            $("body").animate({ scrollTop: $(document).height() }, 3000);
        });
    });
});