Utilice dos botones (imágenes) para desplazarse por un DIV que está configurado para desbordamiento: oculto; con jQuery

Question

estoy teniendo un contenedor div:

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

el contenido dentro de este contenedor es superior a 157px. tengo dos enlaces (imágenes) que quiero utilizar para desplazarse por el contenido dentro del contenedor arriba o hacia abajo:

<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> 

cómo puedo conseguir esos dos enlaces para desplazarse por el contenido del interior del contenedor?

muchas gracias

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

Gracias por su ayuda. Resulta que funciona mejor usando 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);; 
    }); 
}); 

Answer 1

Se puede extraer de estos ejemplos para aprender a implementar o utilizar directamente que consigan la tarea por hacer:

1- HoverScroll jQuery plugin

2- jCarousel

3- Smooth Div Scroll

Answer 2

Si desea utilizar el evento onmouseover y onmouseout, podría usar algo como eso:

onmouseover:

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

y onmouseout que temporizador claro:

clearTimeout(timerScrollUp); 

Answer 3

Aquí hay un código que funciona :) Usted tendrá que añadir un poco de estilo para evitar que los botones se mueva demasiado. Agregue la posición "fija" para los botones.

Essentialyl lo que está sucediendo aquí es que el contenido se mueve hacia arriba o hacia abajo dentro o fuera del contenedor haciendo que parezca desplazarse. ¡Mientras que los botones no se tocan!

Esperamos que este sea de uso :)

<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>