How to make a scroll as real as clicking the scroll bar arrows?

Question

I want to simulate the scroll bar arrows' clicks by hovering certain elements. Basic example:

function scrollBody(dir, speed){
    $('html, body').animate(
        {'scrollTop': dir+'='+speed+'px'},
        {duration: 300, easing: 'easeOutQuad'}
    );
};
$('#top').hover(function(){scrollBody('-', '50')});
$('#bottom').hover(function(){scrollBody('+', '50')});
$('#top-fast').hover(function(){scrollBody('-', '150')});
$('#bottom-fast').hover(function(){scrollBody('+', '150')});

#content{width: 300px}
.scroller{
    position: fixed;
    background-color: grey;
    color: white;
    right:0;
    padding: 5px;
    width: 35px;
}
.scroller:hover{background-color:green}
#top{top:35px}
#bottom{bottom:35px}
#top-fast{top:0}
#bottom-fast{bottom:0}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<div id="content">
  Lorem ipsum dolor sit amet   Lorem ipsum dolor sit amet   Lorem ipsum dolor sit amet   Lorem ipsum dolor Lorem ipsum dolor sit amet   Lorem ipsum dolor sit amet   Lorem ipsum dolor Lorem ipsum dolor sit amet   Lorem ipsum dolor sit amet   Lorem ipsum dolor Lorem ipsum dolor sit amet   Lorem ipsum dolor sit amet   Lorem ipsum dolor Lorem ipsum dolor sit amet   Lorem ipsum dolor sit amet   Lorem ipsum dolor sit amet   Lorem ipsum dolor sit amet   Lorem ipsum dolor sit amet   Lorem ipsum dolor sit amet   Lorem ipsum dolor sit amet   Lorem ipsum dolor sit amet   Lorem ipsum dolor sit amet   Lorem ipsum dolor sit amet   Lorem ipsum dolor sit amet   Lorem ipsum dolor sit amet   Lorem ipsum dolor sit amet   Lorem ipsum dolor sit amet   Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet   Lorem ipsum dolor sit amet   Lorem ipsum dolor sit amet   Lorem ipsum dolor Lorem ipsum dolor sit amet   Lorem ipsum dolor sit amet   Lorem ipsum dolor Lorem ipsum dolor sit amet   Lorem ipsum dolor sit amet   Lorem ipsum dolor Lorem ipsum dolor sit amet   Lorem ipsum dolor sit amet   Lorem ipsum dolor Lorem ipsum dolor sit amet   Lorem ipsum dolor sit amet   Lorem ipsum dolor sit amet   Lorem ipsum dolor sit amet   Lorem ipsum dolor sit amet   Lorem ipsum dolor sit amet   Lorem ipsum dolor sit amet   Lorem ipsum dolor sit amet   Lorem ipsum dolor sit amet   Lorem ipsum dolor sit amet   Lorem ipsum dolor sit amet   Lorem ipsum dolor sit amet   Lorem ipsum dolor sit amet   Lorem ipsum dolor sit amet   Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet   Lorem ipsum dolor sit amet   Lorem ipsum dolor sit amet   Lorem ipsum dolor Lorem ipsum dolor sit amet   Lorem ipsum dolor sit amet   Lorem ipsum dolor Lorem ipsum dolor sit amet   Lorem ipsum dolor sit amet   Lorem ipsum dolor Lorem ipsum dolor sit amet   Lorem ipsum dolor sit amet   Lorem ipsum dolor Lorem ipsum dolor sit amet   Lorem ipsum dolor sit amet   Lorem ipsum dolor sit amet   Lorem ipsum dolor sit amet   Lorem ipsum dolor sit amet   Lorem ipsum dolor sit amet   Lorem ipsum dolor sit amet   Lorem ipsum dolor sit amet   Lorem ipsum dolor sit amet   Lorem ipsum dolor sit amet   Lorem ipsum dolor sit amet   Lorem ipsum dolor sit amet   Lorem ipsum dolor sit amet   Lorem ipsum dolor sit amet   Lorem ipsum dolor sit amet 
</div>
<div id="top" class="scroller">
  2Top
</div>
<div id="bottom" class="scroller">
  2Bot
</div>
<div id="top-fast" class="scroller">
  2T++
</div>
<div id="bottom-fast" class="scroller">
  2B++
</div>

I know, it's very simple and worse, it has hiccups... You need to move the cursor around in order to keep it scrolling. I want to turn it into a continuous smooth scroll.

After this I simply turned it recursively (fiddle) but I got stack overflow (console), should I use stopPropagation at some point (after a few recursions) or a loop instead using the hover's toggle (to stop when not hovering) or something else?

If you know other ways (without jQuery-UI to smooth it or even without jQuery at all) I will appreciate!

Answer 1

Give all the elements you want this hover behaviour for, a certain class.
Dirty check if the mouse is above those elements.
Send corresponding clicks/activate scrolling, at desired pace, or as long as the hover is active.

Update:

Here is a working snippet. Nothing changed in the fiddle other than JS. It's got a bit of a delay to stop scrolling because of the timeout. Relevant docs:

var actions;

function scroll(dir, speed){
        $('html, body').animate(
        {'scrollTop': dir+'='+speed+'px'},
        {duration: 300, easing: 'easeOutQuad'}
        );
};

function startScroll(dir, speed){
    actions = setTimeout(function(){
        scroll(dir, speed);
        startScroll(dir, speed);
    }, 300);

};

function endScroll(){
    clearTimeout(actions);    
}
$('#top').hover(function(){startScroll('-', '50')}, endScroll);
$('#bottom').hover(function(){startScroll('+', '50')}, endScroll);
$('#top-fast').hover(function(){startScroll('-', '150')}, endScroll);
$('#bottom-fast').hover(function(){startScroll('+', '150')}, endScroll);

hover, especially the 2nd callback on mouse leaving.
clearTimeout, since we need it to turn off the scrolling and stop the infinite loop.