How to add the animation to the top of the page using the easings library?

2

The search for effects to add on a button "Back to Top" found this jQuery library that uses CSS transition , SCSS and jQuery itself to make animations, but I could not add them to the top button, does anyone know? Or do you know of another of this type?

Website: link

    
asked by anonymous 13.10.2017 / 15:57

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><scriptsrc="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 go back 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 add any easing from here

    
13.10.2017 / 16:15
0

I made this code 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 class "anchor" in the "a" you want to do the anchor effect:

Example:

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

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

<div id="topo">

So it goes to the div with the top id.

Example: link

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: link

    
13.10.2017 / 16:04