Question

我需要为网页easeOutBounce按钮设置back-to-top。

我有以下代码.scrollTop但无法添加

{
    duration: 2000,
    easing: "easeOutBounce"
}

现有.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);
    });
});

Answer 1

像这样：

＆＃13;

$(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');
  });
});

＆＃13;

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

＆＃13;

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

＆＃13;

或者，像这样：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

有用的网站：

http://easings.net/（底部的用法示例）

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

Install just the easings to get around requirement for jQueryUI

如何在jQuery中为.scrollTop设置'easeOutBounce'？

1 个答案: