scrolling

by xerxesnoble

HTML

<div id="lol" onclick="move('kek',function (p) {
            return p;
        })"></div>
<div id="kek" onclick="move('kuk',function (p) {
            return p;
        })"></div>
<div id="kuk" onclick="move('lol',function (p) {
            return p;
        })"></div>

<input type="button" id="button" onclick="alert(window.pageYOffset)"/>

CSS

body {
    height:10000px;
    position:absolute
}
#lol {
    width:100px;
    height:100px;
    background-color:black;
    margin-top:0;
    position:absolute
}
#kek {
    width:100px;
    height:100px;
    background-color:blue;
    position:absolute;
    margin-top:800px;
}
#kuk {
    width:100px;
    height:100px;
    background-color:red;
    position:absolute;
    margin-top:1600px;
}
#button{
    position:fixed;
    margin-left:110px
}

JavaScript

var run = true;
var start = new Date();
var xObj = {};

function animate(x) {
    xObj = x; 
    start = new Date();    
    run = true;
}



function move(element, delta) {
    var to = document.getElementById(element);
    var smola=window.pageYOffset;
    var rozdielminus = smola - to.offsetTop;
    var rozdielplus = to.offsetTop-smola;
    if(window.pageYOffset===0){
    animate({
        delay: 10,
        duration: 1000,
        delta: delta,
        step: function (delta) {
            d = delta * to.offsetTop;
        }
    });}
    else if(window.pageYOffset!==0 && window.pageYOffset<to.offsetTop){
        animate({
        delay: 10,
        duration: 1000,
        delta: delta,
        step: function (delta) {
            d = smola+(delta*rozdielplus);
        }
    });
    
    }
    else {
       animate({
        delay: 10,
        duration: 1000,
        delta: delta,
        step: function (delta) {
            d = smola-(delta*rozdielminus);
        }
    });}

}

var d = 0;

var step = function(){
    if(xObj === {}) return;
    if(run){
        var timepassed = new Date() - start;
        var progress = timepassed / xObj.duration;
        if (progress > 1) {
            progress = 1;
        }
        var delta = xObj.delta ? xObj.delta(progress) : 0;
        if(xObj.step) xObj.step(delta);
        window.scrollTo(0, d);
        if (progress == 1) {
            run = false;
        }
    }
}

  
var displayLoop = function(){
    step();
    window.requestAnimationFrame(displayLoop);
};

displayLoop();