[HTML/CSS][Ch9][스타벅스] 페이지 상단으로 이동(ScrollTo)

gsap > ScollToPlugin 사용

• 구글에 gsap cdn 검색 > scrollToPlugin 찾고 사용

<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>

index.html -> ScrollTo 버튼 추가

<!--TO TOP BUTTON-->
<div id="to-top">
	<div class="material-icons">arrow_upward</div>
</div>

main.css -> ScrollTo 버튼 추가

/*SCROLL TO TOP*/
#to-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: 10px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}

main.js -> scroll 기능 수정 및 scrollTo 기능 추가

/**
 * 배지
 */
const badgeEl = document.querySelector('header .badges');

// window 객체 : 브라우저 창을 의미
/* 화면을 스크롤할 때 (스크롤할때마다 해당함수가 실행되기 때문에 사이트 자체가 무거워짐 -> 화면 버벅임 현상 발생)
window.addEventListener('scroll', function () {
  console.log('scroll!!');
}); */
// _.throttle(함수, 시간) : 0.3초 단위(사용자 지정)로 부하를 줘서 함수가 연속으로 실행되는 것을 방지 (lodash.js)
window.addEventListener('scroll', _.throttle(function () {
  // window.scrollY : 화면이 몇 px 지점에 위치하는지 확인
  if(window.scrollY > 500) {
    // 배지 숨기기
    // badgeEl.style.display = 'none'; > 이렇게 하면 부자연스러워 보일 수 있어서 gsap.js 사용
    // gsap.to(요소, 지속시간, 옵션)
    // badgeEl 요소를 0.6초 동안 opacity : 0(점점 투명해지는) + display : none 애니메이션이 처리
    gsap.to(badgeEl, .6, {
      opacity : 0,
      display : 'none'
    });
    
    // srollTo 버튼 보이기
    gsap.to('#to-top', .2, {
      x : 0
    });
  }else{
    // 배지 보이기
    // badgeEl.style.display = 'block';
    // badgeEl 요소를 0.6초 동안 opacity : 1(점점 나타나는) + display : block 애니메이션이 처리
    gsap.to(badgeEl, .6, {
      opacity : 1,
      display : 'block'
    });
    
    // srollTo 버튼 숨기기
    gsap.to('#to-top', .2, {
      x : 100
    });
  }
}, 300));

/**
 * scrollTo 기능
 */
const toTopEl = document.querySelector('#to-top');
toTopEl.addEventListener('click', function () {
  gsap.to(window, .7, {
    scrollTo : 0      // 화면의 위치를 0px 지점으로 옮겨줌
  });
});

출력