[카카오테크캠퍼스 선택과정] 스타벅스 예제: 페이지 상단으로 이동(scrollTo)

gsap의 화면을 특정 위치로 이동해주는 ScrollToPlugin, 강의의 3.6.0 버전을 사용했다.

      

      

      

    
    

      <javascript />
    
window.addEventListener(
  "scroll",
  _.throttle(function () {
    if (window.scrollY > 500) {
      // 뱃지 숨기기
      // gsap.to(요소, 지속시간(s), 옵션)
      gsap.to(badgeEl, 0.6, {
        opacity: 0,
        display: "none",
      });
      // 버튼 보이기
      gsap.to(toTopEl, 0.2, {
        x: 0,
      });
    } else {
      // 뱃지 보이기
      gsap.to(badgeEl, 0.6, {
        opacity: 1,
        display: "block",
      });
      // 버튼 숨기기
      gsap.to(toTopEl, 0.2, {
        x: 100,
      });
    }
  }, 300)
);

// 제일 위로 스크롤
toTopEl.addEventListener("click", function () {
  gsap.to(window, 0.7, {
    scrollTo: 0,
  });
});