正如标题所说,如何通过此处找到的easing transition
来实现:
https://gist.github.com/gre/1650294
请在下面查看我想要'在纯javascript中做:
var up = $('#toTop');
$(window).scroll(function() {
$(this).scrollTop() < 300 ? up.fadeOut() : up.fadeIn();
});
$('#toTop').click(function() {
$('html, body').stop().animate({
scrollTop: 0
}, 2000, 'easeInOutQuart');
在这里,我对香草的尝试失败了:
(function() { // reveal arrow
var arrow = document.getElementById('toTop'),
myPage = document.querySelectorAll('html, body'),
revealArrrow = function() {
var y = window.scrollY;
y >= 600 ? arrow.className = 'show' : element.classList.remove('show');
};
arrow.addEventListener('click', function(e) {
myPage.animate({
scrollTop: 0
}, 2000, 'easeInOutQuart');
});
window.addEventListener('scroll', revealArrrow);
})();
EasingFunctions = {
easeInOutQuart: function(t) {
return t < 0.5 ? 8 * t * t * t * t : 1 - 8 * (--t) * t * t * t
}
}
也许与setTimeout
...?
非常感谢。