Scrolling on webpage with mouse location - hover on side elements

Question

So I have this layout here .

<div class="content">
    <div class="direction_left"></div>
    <div class="direction_right"></div>
    <div class="direction_up"></div>
    <div class="direction_down"></div>
</div>
<div id="game">
    <div id="pos"></div>
</div>

4 divs, if I hover on top it (should) scroll top, if I hover on bottom it (should) scroll bot, left scrolls left and right scrolls right!

---

On mouse hover on any of the four divs inside the content will scroll the page accordingly.

Important h_amount is horizontal and v_amount is for vertical

function scroll_h() {
    console.log('scrolling left and right'+h_amount);
    $('#game').animate({
        scrollLeft: h_amount
    }, 100, 'linear',function() {
        if (h_amount != '') {
            scroll_h();
        }
    });
}
function scroll_v() {
    console.log('scrolling up and down'+v_amount);
    $('#game').animate({
        scrollTop: v_amount
    }, 100, 'linear',function() {
        if (v_amount != '') {
            scroll_v();
        }
    });
}

---

and then on hover I call

$('.direction_right').hover(function() {
    console.log('scroll right');
    h_amount = '+=50';
    scroll_h();
}, function() {
    h_amount = '';
});

$('.direction_up').hover(function() {
    console.log('scroll up');
    v_amount = '-=50';
    scroll_v();
}, function() {
    v_amount = '';
});

FULL fiddle here

The problem, I cannot understand why it does not work for up and down. I think my script is correct so am thinking maybe css which is a general weakness of mine might be wrong :D help!

Answer 1

I think I found my answer, please correct me if I am wrong!

Found this question here which asks why his scrollTop() wont animate, and the answer says that window does not have a scrollTop() property, and to use body or html instead (depends on browser, so use both). Therefore I think my #game div does not have a scrollTop() property either! So I replaced it with html,body and its now working :D.

*

P.S. Don't really know if its actually working or "working".

*

new fiddle here Also changed that gradient background because it made me dizzy!