pure javascript auto scroll to bottom of a page then back up

Question

This script works fine if you are using jquery:

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

However, I need this in pure JS. I assume this is possible. I need the page to scroll to the bottom, then back up and repeat like in this demo: http://jsfiddle.net/QUCWe/

Many thanks.

Did you check http://stackoverflow.com/questions/11715646/scroll-automatically-to-the-bottom-of-the-page . I am not sure about animation , however try doing window.scrollTo(0,document.body.scrollHeight); and window.scrollTo(0,0); slowly perhaps using timeout . — Nishant, Jun 14 '14 at 21:39
Sometimes I like to see people write what they think is simple jQuery, then put `debugger;` right before it and look in the browser's debugging tools. The number of instructions jQuery forces your poor browser to step through to do literally anything is... staggering. — Niet the Dark Absol, Jun 14 '14 at 21:42
Exactly, And this page will be getting refreshed with a raspberry pi every three minutes, I don't want to be putting it under more stress. — user3730931, Jun 14 '14 at 21:56

score 1 · Accepted Answer · edited May 23 '17 at 10:28

This is a quick mock up, hope it helps you get started. I got the easing equations from 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);
}

Just what I wanted, Thanks :3 Only problem is it dosen't go back up. — user3730931, Jun 15 '14 at 11:26

score -1 · Answer 2 · answered Jun 14 '14 at 21:47

-1

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/

answered Jun 14 '14 at 21:47

Dastagir

982
8
14

Yep it doesn't have smooth scroll!! – Dastagir Jun 14 '14 at 21:59

pure javascript auto scroll to bottom of a page then back up

2 Answers2