Scrolling through posts

[salvi]

Greetings,
First of all, what I want to achieve is this: I have my main page, with a div 'cont' and a php file that dynamically holds posts, stored in a database, let's say post.php.
I would like the user, by clicking a button, to scroll smoothly to the post.php page (actually load smoothly the contents of post.php inside the 'cont' div).

I came across http://archive.plugins.jquery.com/project/ScrollTo but I;m not sure if that's what I'm looking for, since this scrolls through elements that are already there. I want to create a slide for posts that are dynamically created. Is that even possible?
The effect is similar to this page's http://www.charliegentle.co.uk/

Any tips would be mostly appreciated!!

[Padonak]

if you are adding the new posts dynamically to the same page you can insert each post for instance into <div id="insert the post id here, pick it from DB by your php-script, it is going to be unique for sure"></div> and then you can do with this div everything depending on your conscience

[nathanwall]

joi has a TransitionPanel widget, which is designed for transitioning between dynamically generated content. It's very easy. Look at the example on that page, it probably does exactly what you want (scrolls between dynamically generated PHP content).

[salvi]

I'll be going with what Padonak said.
What I've done so far is:

<div id="maincontent">
<div id="cont"><span id="body_s">I am the main page's post</span><br/></div>
<div id="prev_post" class="page">I am the previous post!</div>
</div>

and my css:

.page{
	float:left;
	display:none;
}

As for the javascript part:

var $scrollerWindow = $('#maincontent');
function gotoPrevPost(){
$scrollerWindow.stop().scrollTo( $('#prev_post'), $speed, {axis:'x',offset:{left: -20, top:0 }} );
$('.page:visible').fadeOut('normal',function(){
	$('#prev_post').fadeIn();
});
return false;
}
$('.goto_prev').live("click", gotoPrevPost);

However, the scroll part is not working. I checked to see if it, at least, enters the function and it does. My url also changes. No scrolling though

[salvi]

*bump*

[salvi]

Made som changes to my original code:

CSS:

.page{
	display:none;
	min-height:645px;
	width:100%;
	height:100%;
	background-color:#F96;
	position:relative;
	float:left;
	margin-bottom:5px;
}

And my JS:

var $scrollerWindow = $('#cont');
	var $speed = 1500;
	
	
	function gotoPrevPost()
	{
		$scrollerWindow.scrollTo( $('#previous_post'), $speed, {axis:'x',offset:{left: -20, top:0 }} );
		$('#cont').fadeOut('normal',function()
		{
			$('#prev_post').css('display','inline').fadeIn();
		});
		return false;
	}

If I comment out

$scrollerWindow.scrollTo( $('#previous_post'), $speed, {axis:'x',offset:{left: -20, top:0 }} );

the fadeIn and fadeOut works fine, but no luck with the scrolling yet.