Question

I am building a scrolling application that requires users to configure the scroll speed.

Here is my current code:

function scroll() {
        var overlay = document.getElementById('overlay');
        overlay.scrollTop = overlay.scrollTop + 2;
    }

    function togglescrolling() {
        if (goscrolling == false) {
            window.clearInterval(scrollinterval);
            scrollinterval = window.setInterval(scroll, 0);
            goscrolling = true;
        } else {
            goscrolling = false;
            window.clearInterval(scrollinterval);
        }
    }

This code works and it autoscrolls to bottom of the page as planned but it scrolls very fast and I would like to configure this speed.

I used jQuery Animate in the past and not sure if it is really helping.

Answer 1

To animate page scroll with jQuery:

$('html,body').animate({scrollTop: /* numeric pixel value here*/}, duration);

Can get the distance needed to scroll to specific element by getting that element offset().top

var myDivTop= $('#myDiv').offset().top;
$('html,body').animate({scrollTop:myDivTop}, duration);