How to add an animation button to go back to the top of the page using the easings library?

Asked

Viewed 885 times

2

The search for effects to add on a button like "Back to Top" found this jQuery library that uses the Transition CSS, SCSS and jQuery itself to make animations, but I couldn’t add them to the top button, does anyone know? Or you know another one like this?

Website: http://easings.net/pt

javascript jquery css transition
  • 1

    Will you import an entire library just for that purpose? There are simple resolutions of less than 10 lines that does what you want

  • 2

    I don’t know if I understood your question correctly, but whenever I need to use animations, I do simulations on the site http://css3generator.com.

  • @thaináv. did not know this, thank you very much!

  • 1

    For nothing, arrange! =)

2 answers

4


To apply easing you can do as follows:

$('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>

In your case to return to the top you would change the object that enters the Animate:

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

You can edit and put any effect (easing) from here

  • 1

    It was exactly what I wanted, it worked perfectly, just change and take easeOutBounce and put any other effect that this on the link. Thank you @miguel was exactly what I wanted. Thank you

  • 1

    Any other exact link also works. Thank goodness @Claytonfurlanetto, you’re welcome

0

I made this code is very simple to use:

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

You add the "anchor" class in the "a" you want to make the anchor effect:

Example:

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

And in href you put where it goes, for example you put in the first div of your site the top id.

<div id="topo">

So it goes up to the div with the top id.

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

If you want a horizontal scroll:

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

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

  • This kind of effect I have already done, but wanted something different, you took a look at the link, saw the effects? By your answer I think you did not see. These different effects that are on the link I wanted to add, to make it something different.

  • @Claytonfurlanetto made an edit, but da to do horizontally too and the change is very simple, the biggest job in all this is css.

  • Thank you Wictor our friend Miguel down there explained me how to use the library effects, I wanted to use it because for each project I can apply the effects, still crawling in js, thanks for the help.

Browser other questions tagged javascript jquery css transition

You are not signed in. Login or sign up in order to post.