How to make smooth bearing with button or anchor?

Question

I need some help in css, and js.

I need a js to do that when I click the down button, or up, scroll a div to a certain size:

Example link: http://jsfiddle.net/A64S2/

Answer 1

Here’s a hint, using jQuery/Animate:

var frame = $('.texto');
$('.botoes a').on('click', function (e) {
    e.preventDefault();
    fazerScroll($(this).parent().hasClass('up')); // chamar a funcao controlando se o elemento pai tem a classe 'up'
});

function fazerScroll(direcao) {  // uso a flag "direcao", que pode ser true (up ou false (down)
    var scrollAtual = frame.scrollTop(); // controlar a posicao atual do scroll
    var novaPosicao = direcao ? scrollAtual - 200 : scrollAtual + 200; // subir ou descer consoante aq flag direcao
    frame.animate({ // usar o animate para ser mais suave o scroll
        scrollTop: novaPosicao
    }, 1000); // duracao: 1000milisegundos
}

Example:

var frame = $('.texto');
$('.botoes a').on('click', function (e) {
    e.preventDefault();
    fazerScroll($(this).parent().hasClass('up'));
});

function fazerScroll(direcao) {
    var scrollAtual = frame.scrollTop();
    var novaPosicao = direcao ? scrollAtual - 200 : scrollAtual + 200;
    frame.animate({
        scrollTop: novaPosicao
    }, 1000);
}

.mural {
    width:100%;
    background:black;
}
.texto {
    margin:20px auto;
    width:50%;
    height:100px;
    background:#8f528f;
    padding:20px;
    color:white;
    overflow-y:scroll;
}
.botoes {
    float:right;
    display:inline-flex;
    color:black;
    background:white
}
.up {
    margin-right:10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class="mural">
    <div class="texto">
        <p>textotextotexteoxtexoteodooeifeodfdafdsfsdfsd</p>
        <p>textotextotexteoxtexoteodooeifeodfdafdsfsdfsd</p>
        <p>textotextotexteoxtexoteodooeifeodfdafdsfsdfsd</p>
        <p>textotextotexteoxtexoteodooeifeodfdafdsfsdfsd</p>
        <p>textotextotexteoxtexoteodooeifeodfdafdsfsdfsd</p>
        <p>textotextotexteoxtexoteodooeifeodfdafdsfsdfsd</p>
        <p>textotextotexteoxtexoteodooeifeodfdafdsfsdfsd</p>
    </div>
    <div class="botoes">
        <div class="up"><a href="">UP</a>

        </div>
        <div class="down"><a href="">DOWN</a>

        </div>
    </div>
</div>

example in codepen