Use two buttons (images) to scroll a DIV which is set to overflow: hidden; with jQuery

i am having a div container:

.mask { 
    height: 157px;
    overflow: hidden;
}

the content inside this container is longer than 157px. i have two links (images) that i want to use to scroll the content inside the container up or down:

<ul class="scroll">
<li><a href="#"><img src="img/text-down-icn.png" alt="scroll down" /></a></li>
<li><a href="#"><img src="img/text-up-icn.png" alt="scroll up" /></a></li>
</ul>

how can i get those two links to scroll the content of inside the container?

thanks a lot

===========================================

Thanks for your help. Turns out it works best using the scrollTo Plugin (http://plugins.jquery.com/project/ScrollTo).

$(document).ready(function(){ 
    $(".down").click(function () {
        $('.mask').scrollTo( '+=156px', 开发者_高级运维500 );;
    });

    $(".up").click(function () {
        $('.mask').scrollTo( '-=156px', 500 );;
    });
}); 

If you want to use onmouseover and onmouseout event you could use something like that :

onmouseover :

function scrollUp(){
  document.getElementById('scroll-pane').scrollTop -= 15; // vertical scroll increments
  timerScrollUp = setTimeout('scrollUp()',10);
}

and onmouseout you clear timer :

clearTimeout(timerScrollUp);

Here is some code that works :) You'll need to add some styling to prevent the buttons from moving too. Add the "fixed" position for the buttons.

Essentialyl what is happening here is the content is being moved up/down in/out of the container making it appear to scroll. While the buttons themselves are untouched!

Hope this is of use :)

<div class="mask">
<div id="mover">
Content Here
</div>
<ul class="scroll">
    <li><a href="#" class="down"><img src="img/text-down-icn.png" alt="scroll down" /></a></li>
    <li><a href="#" class="up"><img src="img/text-up-icn.png" alt="scroll up" /></a></li>
</ul>
</div>

<script type="text/javascript">
    $(".down").click(function () {
        $("#mover").animate({marginTop: '-=20px'}, 0);
    });

    $(".up").click(function () {
        $("#mover").animate({ marginTop: '+=20px' }, 0);
    });
</script>

<style>
.mask { 
    height: 157px;
    overflow: hidden;
}

.scroll
{
    float: right;
}
</style>

You can check out these examples to learn how to implement it or to directly use them to get the task done:

1- HoverScroll jQuery plugin

2- jCarousel

3- Smooth Div Scroll