滚动后删除动画

Question

我试图在滚动到顶部位置后删除动画。如何删除此动画？ 我需要一个setTimeout函数吗？还是可以使用其他功能？

window.onscroll = function () {
scrollFunction()
};


function scrollFunction() {
    if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
        document.getElementById("topButton").style.display = "block";
    } else {
        document.getElementById("topButton").style.display = "none";
    }
}

function topFunction(ID, btn) {
    var elmnt = document.getElementById(ID);
    var animation = btn;
    animation.classList.add('rotate');
    elmnt.scrollIntoView({behavior: 'smooth'});
    if (document.body.scrollTop == 0 || document.documentElement.scrollTop == 0) {
        animation.classList.remove('rotate')
    }
}

Answer 1

您可以在某些元素上使用全局变量或类来检测何时制作动画。

例如：

var isAnimated = false;

window.addEventListener('scroll', function(e) {
  if (!isAnimated) {
    scrollFunction();
  } else {
    window.removeEventListener('scroll');
  }
}

function scrollFunction() {
    if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
        document.getElementById("topButton").style.display = "block";
    } else {
        isAnimated = true;
        document.getElementById("topButton").style.display = "none";
    }
}