13. 스타벅스 페이지 상단으로 이동(ScrollTo)

스타벅스 ScrollTo 오픈소스 연결

<!-- GSAP & ScrollToPlugin -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js" integrity="sha512-H6cPm97FAsgIKmlBA4s774vqoN24V5gSQL4yBTDOY2su2DeXZVhQPxFK4P6GPdnZqM9fg1G3cMv5wD7e6cFLZQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/ScrollToPlugin.min.js" integrity="sha512-agNfXmEo6F+qcj3WGryaRvl9X9wLMQORbTt5ACS9YVqzKDMzhRxY+xjgO45HCLm61OwHWR1Oblp4QSw/SGh9SA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

• 브라우저에 gsap cdn 검색
• index.html에 연결

---

스타벅스 페이지 상단으로 이동 HTML

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

• material-icon을 사용

---

스타벅스 페이지 상단으로 이동 CSS

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

• 가로 42px, 세로 42px
• 배경 색 #333
• 요소 색 #fff
• 테두리 2px solid 색 #fff
• 테두리 둥글게 10px만큼
• 커서는 요소에 가져다대면 손가락 커서로 변경
• 수평 정렬
• 위아래 기준 중앙 정렬
• 좌우 기준 중앙 정렬
• 위치 고정
• 아래로부터 30px, 오른쪽으로부터 30px 위치에 지정
• z-index:9로 하여 모든 요소보다 위에 지정

---

스타벅스 페이지 상단으로 이동 JS

const badgeEl = document.querySelector('header .badges');
const toTopEl = document.querySelector('#to-top');

window.addEventListener('scroll', _.throttle(function () {
  console.log(window.scrollY);
  if (window.scrollY > 500){
    // 배지 숨기기!
    // gsap.to(요소, 지속시간, 옵션);
    gsap.to(badgeEl, .6, {
      opacity: 0,
      display: 'none'
    });
    // 버튼 보이기!
    gsap.to(toTopEl, .2, {
      x: 0
    });
  } else {
    // 배지 보이기!
    gsap.to(badgeEl, .6, {
      opacity: 1,
      display: 'block'
    });
    // 버튼 숨기기!
    gsap.to(toTopEl, .2, {
      x: 100
    });
  }
}, 300));
//  _.throttle(함수, 시간)


toTopEl.addEventListener('click', function () {
  gsap.to(window, .7, {
      scrollTo: 0
  });
});

• 기존 뱃지가 보이면 상단 스크롤 버튼이 안보이고, 기존 뱃지가 안보이면 스크롤 버튼이 보이는 구조
• 클릭을 하면 뷰포트 기준 시작점으로 올라감.

---

스타벅스 페이지 상단으로 이동 최종 완성