How to set a 'easeOutBounce' for .scrollTop in jQuery?

Question

I need to set a easeOutBounce for a webpage back-to-top button .

I have below code for .scrollTop but unable to add

{
    duration: 2000,
    easing: "easeOutBounce"
}

Existing .js:

$(document).ready(function() {
    // Show or hide the sticky footer button
    $(window).scroll(function() {
    if ($(this).scrollTop() > 500) {
        $('.back-to-top').fadeIn(200);
    } else {
        $('.back-to-top').fadeOut(200);
    }
});

// Animate the scroll to top
$('.back-to-top').click(function(event) {
    event.preventDefault();

    $('html, body').animate({scrollTop: 0}, 300);
    });
});

score 1 · Accepted Answer · edited May 23 '17 at 11:52

Like this:

$(document).ready(function() {
  // Show or hide the sticky footer button
  $(window).scroll(function() {
    if ($(this).scrollTop() > 500) {
      $('.back-to-top').fadeIn(200);
    } else {
      $('.back-to-top').fadeOut(200);
    }
  });

  // Animate the scroll to top
  $('.back-to-top').click(function(event) {
    event.preventDefault();

    $('html, body').animate({scrollTop: 0}, 900, 'easeOutElastic');
  });
});

.wrap{height:2000px;}
  .in1, .in2{height:250px;margin-top:50px;}
  .in1 {border:1px solid blue;}
  .in2 {border:1px solid red;}
button{margin-top:50px;font-size:3rem;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

<div class="wrap">
  <div class="in1"> Scroll down</div>
  <div class="in1">Down a bit more</div>
  <button class="back-to-top">Back To Top</button>
</div>

Or, like this:

$(document).ready(function() {
  // Show or hide the sticky footer button
  $(window).scroll(function() {
    if ($(this).scrollTop() > 500) {
      $('.back-to-top').fadeIn(200);
    } else {
      $('.back-to-top').fadeOut(200);
    }
  });

  // Animate the scroll to top
  $('.back-to-top').click(function(event) {
    event.preventDefault();

    $('html, body').animate(
      {scrollTop: 0},
      {
        easing: 'easeOutElastic',
        duration: 1500
      }
    );
  });
});

.wrap{height:2000px;}
  .in1, .in2{height:250px;margin-top:50px;}
  .in1 {border:1px solid blue;}
  .in2 {border:1px solid red;}
button{margin-top:50px;font-size:3rem;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

<div class="wrap">
  <div class="in1"> Scroll down</div>
  <div class="in1">Down a bit more</div>
  <button class="back-to-top">Back To Top</button>
</div>

Useful sites:

http://easings.net/ (usage examples at bottom)

http://www.learningjquery.com/2009/02/quick-tip-add-easing-to-your-animations

Install just the easings to get around requirement for jQueryUI

It is bouncing with a 'easeOutElastic' instead of 'easeOutBounce'. I need download link of jquery/1.11.1/jquery.min.js and jqueryui/1.11.4/jquery-ui.min.js — sanzuu, Jun 22 '16 at 18:21
I found this code in https://jqueryui.com . Can I use this code remain unchanged? — sanzuu, Jun 22 '16 at 18:48
**(1)** I changed the easing to Elastic only for demo purposes (because `easeOutBounce` was not as visible when I was writing the solution). **(2)** Note that jQueryUI is required for both of those easings, BUT you can also [install the easings by themselves](http://stackoverflow.com/questions/5207301/jquery-easing-functions-without-using-a-plugin) and then you don't need to install jQUI. *Just going ahead and installing jQUI was easiest for me when writing the answer.* — cssyphus, Jun 22 '16 at 20:12

How to set a 'easeOutBounce' for .scrollTop in jQuery?

1 Answers1