ページ上部に移動

GSAPとScrollToプラグインを使用して、ページ上部のボタンを作成します.
既存のJSを利用して,少量のコードを追加するだけで実現できる.

コード#コード#

HTML

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

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

JS

window.addEventListener('scroll', _.throttle(function () {
  console.log(window.scrollY);
  if (window.scrollY > 500) {
    // gsap.to(요소, 지속시간, 옵션);
    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));
// _.throttle(함수, 시간)

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