Rolagem div de uma página

você pode ver um aplicativo em: http://beuretv.ch

você 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);

}

}

seu html

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

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

Mas se você quiser um resultado mais suave, substitua:

 // 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);

    }

e adicione isso antes de clearInterval:

$(window).scrollLeft(destinatPos);

se você usar o segundo método, use setTimeout e não setInterval 🙂