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

function animate(x) {
    var start = new Date();
    var id = setInterval(function () {
        var timepassed = new Date() - start;
        var progress = timepassed / x.duration;
        if (progress > 1) {
            progress = 1;
        }
        var delta = x.delta(progress);
        x.step(delta);
        if (progress == 1) {
            clearInterval(id);
        }
    }, x.delay);


}

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) {
            window.scrollTo(0, delta * to.offsetTop);
            }
    });}
    else if(window.pageYOffset!==0 && window.pageYOffset<to.offsetTop){
        animate({
        delay: 10,
        duration: 1000,
        delta: delta,
        step: function (delta) {
            window.scrollTo(0, smola+(delta*rozdielplus));
            }
    });
    
    }
    else {
       animate({
        delay: 10,
        duration: 1000,
        delta: delta,
        step: function (delta) {
            window.scrollTo(0, smola-(delta*rozdielminus));
            }
    });}

}