How to make smooth bearing with button or anchor?

Question

How to make smooth bearing with button or anchor?

Navigation

#1 by (2 votes)

1

I need help with css , and js .

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

Sample link: link

javascript jquery css rolamento

asked by anonymous 14.04.2014 / 15:42

1 answer

App: Uses does not work on the server Save windows authentication id

score 2 · Accepted Answer

Here is a suggestion, 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><divclass="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>

codepen example