CODEWITHSUNDEEP
javascriptjquery
sanzuu
sanzuu

Reputation: 192

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

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);
    });
});

Upvotes: 1

Views: 455

Answers (1)

cssyphus
cssyphus

Reputation: 40106

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

Upvotes: 1

Related Questions