On click scroll to bottom with pure js

HTML


<div id="wrapper" style="height:4000px">
    <button id='myButton'>Hello</button>
    <p>Lorem ipsum</p>
</div>


Pure JS


var button = document.getElementById("myButton");
button.addEventListener("click",function(e){
   


var wrapper = document.getElementById("wrapper"); //get div
var h = wrapper.offsetHeight; //get height

scrollTo(h);


function scrollTo(x) {
    //elapsed
    var e;
    //duration in milli seconds
    var d = 1000;
    //b as in begin, where to start (you could get this dynamically)
    var b = 0;
    //start time, when the animation starts
    var s = (new Date()).getTime(); //start time
    //the magic
    var t = setInterval(function () {
        //calculate elapse time
        e = (new Date()).getTime() - s;
        //check if elapse time is less than duration
        if (e < d) {
            //animate using an easing equation
            window.scrollTo(0, ease(e, b, x, d));
        } else {
            //animation is complete, stop interval timer
            clearInterval(t);
            t = null;
        }
    }, 4);
}

//Info about the letters (I think)
//t = elapse time
//b = where to begin
//c = change in comparison to begin
//d = duration of animation
function noease(t, b, c, d) {
    t /= d;
    return b + c * (t);
}

function ease(t, b, c, d) {
    return Math.round(-c * Math.cos(t / d * (Math.PI / 2)) + c + b);
}
   
   
   
     button.disabled = "true";
},false);
   

No comments:

Post a Comment