Question

如果您使用jquery：

，此脚本可以正常工作

$('html, body').animate({ scrollTop: $(document).height() - $(window).height() }, 1000, function() {
    $(this).animate({ scrollTop: 0 }, 1000); });

但是，我需要在纯JS中使用它。我认为这是可能的。我需要将页面滚动到底部，然后备份并重复，就像在此演示中一样：http://jsfiddle.net/QUCWe/

非常感谢。

Answer 1

这是一个快速模拟，希望它可以帮助你开始。我从here得到了缓和方程。

Link to JSFiddle

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

Answer 2

function scroll(speed) {

    document.body.scrollTop = $(document).height() - $(window).height();
    setTimeout(function(){
    document.body.scrollTop = 0;    
    },1000);
}

speed = 1000;

scroll(speed)
setInterval(function(){scroll(speed)}, speed * 2);

http://jsfiddle.net/QUCWe/664/

纯javascript自动滚动到页面底部然后备份

2 个答案: