2

A procura de efeitos pra adicionar em um botão tipo "Voltar ao Topo" encontrei essa biblioteca jQuery que utiliza o transition do CSS, o SCSS e o próprio jQuery pra fazer animações, mas não consegui adicioná-las ao botão topo, alguém conhece? Ou sabe de outra desse tipo?

Site: http://easings.net/pt

4
  • 1
    Você irá importar uma biblioteca inteira apenas para esse efeito? Existe resoluções simples de menos de 10 linhas que faz o que você quer
    – Bsalvo
    13/10/2017 às 13:59
  • 2
    Não sei se entendi direito sua pergunta, mas sempre que preciso utilizar animações, faço simulações no site css3generator.com.
    – Thainá V.
    13/10/2017 às 14:02
  • @thaináv. não conhecia essa, muito obrigado! 13/10/2017 às 15:52
  • 1
    Por nada, disponha! =)
    – Thainá V.
    17/10/2017 às 13:31

2 Respostas 2

4

Para aplicar easing podes fazer da seguinte maneira:

$('button').on('click', function() {
  $('html, body').animate({
    scrollTop: $($(this).data('target')).offset().top
  }, 800, 'easeOutBounce'); // o easing que queres entra como ultimo argumento
});
div {
  height: 600px;
}
#one {
  background-color: red;
}
#two {
  background-color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>

<button data-target="#one">ONE</button>
<button data-target="#two">TWO</button>

<div id="one"></div>
<div id="two"></div>

No teu caso para voltar ao topo mudarias o objeto que entra para o animate:

$('BOTAO_PARA_TOPO').on('click', function() {
    $('html, body').animate({
       scrollTop: 0
    }, 800, 'easeOutBounce');
});

Podes editar e colocar qualquer efeito (easing) daqui

2
  • 1
    Era exatamente o que eu queria, funcionou perfeitamente, é só mudar e tirar o easeOutBounce e colocar qualquer outro efeito que esta no link. Muito obrigado @miguel era exatamente o que queria. Obrigado 13/10/2017 às 14:23
  • 1
    Exato qualquer outro do link também funciona. Ainda bem @ClaytonFurlanetto, de nada
    – Miguel
    13/10/2017 às 14:23
0

Fiz este código é bem simples de usar:

$(function () {
    var $doc = $('html, body');
    $('.ancora').click(function () {
        $doc.animate({
            scrollTop: $($(this).attr('href')).position().top
        }, 700);
        return false;
    });
});

Você adiciona a class "ancora" no "a" que você quer fazer o efeito da ancora:

Exemplo:

<a class="ancora" href="#topo">vai para o topo</a>

E no href você coloca para onde ele vai, por exemplo você coloca na primeira div do seu site o id topo.

<div id="topo">

Assim ele vai ate a div com o id topo.

Exemplo: https://jsfiddle.net/83abc8mq/1/

Se você quiser um scroll horizontal:

$(function () {
    var $doc = $('html, body');
    $('.ancora').click(function () {
        $doc.animate({
            scrollLeft: $($(this).attr('href')).position().left
        }, 700);
        return false;
    });
});

Exemplo: https://jsfiddle.net/83abc8mq/2/

3
  • Esse tipo de efeito já tenho feito, mas queria algo diferente, vc deu uma olhada no link, viu os efeitos? Pela sua resposta acho que vc não viu. Esses efeitos diferentes que estão no link que queria adicionar, pra ficar uma coisa diferente. 13/10/2017 às 14:17
  • @ClaytonFurlanetto fiz uma edição, mas da para fazer de forma horizontal também e a alteração é bem simples, o trabalho maior nisso tudo é o css. 13/10/2017 às 14:23
  • Obrigado Wictor nosso amigo Miguel ali embaixo me explicou como usar os efeitos da biblioteca, queria usar ela pois pra cada projeto posso aplicar os efeitos, ainda engatinho no js, valeu pela ajuda. 13/10/2017 às 14:25

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .