One page div scroll

you can see an application on : http://beuretv.ch

you JS

window.onload = function(){
//positionement du block contenu
var hHeight = document.body.clientHeight/10;
var wWidth = document.body.clientWidth;
document.getElementById('reception').style.width = wWidth + "px";
document.getElementById('actual').style.width = wWidth + "px";
document.getElementById('content').style.width = wWidth*2 + "px";
document.getElementById('actual').innerHTML = document.getElementById('accueil').innerHTML;
}

window.onresize = function(){
//positionement du block contenu
var hHeight = document.body.clientHeight/10;
var wWidth = document.body.clientWidth;
document.getElementById('reception').style.width = wWidth + "px"; 
document.getElementById('actual').style.width = wWidth + "px";
document.getElementById('content').style.width = wWidth*2 + "px";

}

function scrolltoDiv(id_divto){
//check if div must mouve


var contentDiv = document.getElementById(id_divto).innerHTML;

document.getElementById('reception').innerHTML = contentDiv;




if(document.getElementById('reception').offsetLeft == window.pageXOffset){

clearInterval(Divabord);


}else{


var Divabord = setInterval(function(){

var currentPos = window.pageXOffset;

var destinatPos = document.getElementById('reception').offsetLeft;

var calcPos = parseInt(destinatPos)-(currentPos);

 //vitesse initiale du scroll
var x = 25;


//smoot a end


var xu = 25;

var xul = parseInt(currentPos)+(xu);





 //incrementation de la vitesse
 var incrementX;


 // on va a droite
if(currentPos < destinatPos){

 if(xul > destinatPos){

 x= 1;

 }

 var incrementX = x++;


 positionX = parseInt(currentPos)+(incrementX);



 }

 //on va a gauche
if(currentPos > destinatPos){

 if(xul < destinatPos){

 x= 1;

 }

 var incrementX = x++;


 positionX = parseInt(currentPos)-(incrementX);


 }

 $(window).scrollLeft(positionX);



if(document.getElementById('reception').offsetLeft == window.pageXOffset){

 clearInterval(Divabord); 
 document.getElementById('reception').id = "actual_wait";
 document.getElementById('actual').id = "reception";
 document.getElementById('actual_wait').id = "actual";
 document.getElementById('reception').innerHTML = "";

}


},1);

}

}

you html

<div class="page" id="actual"></div>

<div class="page" id="reception"></div>

But il you want a more smooty result replace :

 // on va a droite
if(currentPos < destinatPos){

 $("html,body").animate({"scrollLeft":destinatPos},200);

 }

 //on va a gauche
 if(currentPos > destinatPos){

 $("html,body").animate({"scrollLeft":destinatPos},200);

 }

and add this before clearInterval :

$(window).scrollLeft(destinatPos);

if you use the second methode use setTimeout not setInterval :)