클릭 시 상단으로 자동 스크롤

    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js" integrity="sha512-cdV6j5t5o24hkSciVrb8Ki6FveC2SgwGfLE31+ZQRHAeSRxYhAQskLkq3dLm8ZcWe1N3vBOEYmmbhzf7NTtFFQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/ScrollToPlugin.min.js" integrity="sha512-kSI9CgGh60rJbNVeMJvfNX0UTKAq8LEOea/yKJQbFpIroxT7bf9/zUFXbnfsQP5F6xlOOHtCfBPgsE1ceiHnRw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<style>
      #goto-top {
        position: fixed;
        bottom: 30px;
        right: 30px;
        z-index: 9;
        width: 42px;
        height: 42px;
        background-color: #333;
        color: #fff;
        border: 2px solid #fff;
        border-radius: 50%;
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: center;
      }

</style>

 

    <div id="goto-top">
      <div class="material-icons">arrow_upward</div>
    </div>

 

<script>
const gotoTopEl = document.querySelector('#goto-top')
window.addEventListener('scroll', function() {
  if (window.scrollY > 500) {
    gsap.to(gotoTopEl, .2, {
      x: 0
    })
  } else {
    gsap.to(gotoTopEl, .2, {
      x: 100
    })
  }
})
gotoTopEl.addEventListener('click', function() {
  gsap.to(window, .7, {
    scrollTo: 0
  })
})
</script>

브라우저 스크롤을 아래로 내렸다가

다시 올라갈 때  마우스 클릭만으로 맨 위로 올라간다.
클릭 시 애니메이션 효과를 주면서 스르륵 올라간다.

스크롤이 상단 부분에 있을 때는 화살표가 안보이게 숨는다.