Wie wird ein 'easeOutBounce' für .scrollTop in jQuery gesetzt?

Question

Ich muss eine easeOutBounce für eine Webseite back-to-top Schaltfläche festlegen.

ich unten Code haben für .scrollTop aber nicht in der Lage

{ 
    duration: 2000, 
    easing: "easeOutBounce" 
} 

Bestehende Js hinzuzufügen:

diese

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

Like:

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

Oder wie folgt aus:

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

---

Nützliche Seiten:

http://easings.net/ (Verwendungsbeispiele unten)

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

Install just the easings to get around requirement for jQueryUI