javascript - 到达最终接触部分时旋转我的箭头？

Question

我正在这个网站上工作:demo

我在右上角的网站中有一个固定的向下滚动箭头，我想旋转这个箭头，当用户向下滚动到最后一部分时它指向顶部，当你向上滚动时，它返回到它的原始旋转。我曾尝试使用我在互联网上找到的一些 JS 来完成它，但我无法让它工作。

谁能帮我解决这个问题？它也可以与 JS 或 JQuery 一起使用。

这是我的代码:

.center-con2 {
    display: flex;
    align-items: center;
    justify-content: center;
    bottom: 17px;
    position: absolute;
    z-index: 10;
    left: 0 !important;
    right: 0;
    margin: 0 auto !important;
}

.round2 {
    position: absolute;
    bottom: 20px;
    right: 40px;   
}

#cta2{
    width:100%;
    cursor: pointer;
    position: absolute;
}

  <div class="center-con2">
    <div class="round2">
        <div id="cta2">
        <a style="color: #18a8a4" href="#!"><i id="icon" style="font-size: 20px" class="fas fa-chevron-circle-down"></i></a>
        </div>
    </div>
</div>

Answer 1

$(document).on('scroll', function() {
    if($(this).scrollTop()>=$('#theTarget').position().top){
        flipTheImageHere();
    }
})

我会使用这样的 jQuery 函数，检测何时滚动到某个 ID 以及何时翻转它，否则翻转回来。