Tengo esta sencilla animación utilizando scrollTop()
pero me gustaría que fuera al revés. En vez de ir de abajo hacia arriba fuera de arriba hacia abajo.
¿Alguien me podría echar una mano? Yo no consigo hacerlo funcionar
setInterval(function(){
$('#list').stop().animate({scrollTop:40},400,'swing',function(){
$(this).scrollTop(0).find('span:last').after($('span:first', this));
});
}, 1000);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
* {
box-sizing: border-box;
}
#list {
overflow: hidden;
width: 300px;
height: 250px;
background: red;
padding: 10px;
}
#list span {
display: block;
height: 30px;
padding: 10px 10px;
margin-bottom: 10px;
background: yellow;
}
.item:last-child {
margin-bottom: 0px;
}
</style>
<div id="list">
<span>Item 1</span>
<span>Item 2</span>
<span>Item 3</span>
<span>Item 4</span>
<span>Item 5</span>
<span>Item 6</span>
<span>Item 7</span>
<span>Item 8</span>
<span>Item 9</span>
<span>Item 10</span>
</div>
Aquí hay un fiddle http://jsfiddle.net/e5dtyLjw/4/
Muchas gracias