패스트캠퍼스 온라인 강의를 통해 만든 ★다방 랜딩페이지. 버튼을 누르면 페이지 상단으로 이동하는 "ScrollTo"에 대해서 적어본다

HTML

- 구글 "material-icons"을 사용해서 위로 향하는 화살표 버튼을 넣어준다
- gsap cdn 링크 중 ScrollToPlugin 링크를 추가로 head tag에 연결해주었다

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

JS

화면 상단에서 배지가 보이면 버튼이 안 보이고, 배지가 사라지면 화면에서 버튼이 보이도록 하기 위해서 이전에 작성했던 "배지"와 관련한 addEventListener 메소드에 연결하여 작성하였다

- const toTopEl = document.querySelector('#to-top'); > toTopEl 이라는 변수에 메소드를 할당하는데, 'to-top'이라는 아이디를 선택하는 메소드이다

- 배지가 안 보이는 영역(display: 'none') 바로 밑에 gsap.to(toTopEl, .2, {}을 작성하여서 버튼이 보이도록 제어하였다.

• gsap.to(toTopEl, .2, {x: 0}); > 아이디 to-top인 요소를 찾아서 애니메이션을 추가할 것인데, 애니메이션 지속시간은 0.2초. x축의 이동값을 추가하겠다는 의미(0px에서 시작 -> 100px로 이동)

- 배지가 보이는 영역(display: 'block') 바로 밑에 gsap.to(toTopEl, .2, {}을 작성하여서 버튼이 숨겨지도록

• gsap.to(toTopEl, .2, {x: 100}); > 아이디 to-top인 요소를 찾아서 애니메이션을 추가할 것인데, 애니메이션 지속시간은 0.2초. x축의 이동값이 100px이라는 의미(시작은 0px)

- toTopEl.addEventListener('click', function () { } > 버튼을 누르면 이동하는 함수를 작성하였다.

• event의 1번째 인수: click이벤트, 2번째 인수 : 함수(to-top이라는 요소를 클릭하면 함수를 실행하겠다는 의미)

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

window.addEventListener('scroll', _.throttle(function () {
    console.log(window.scrollY);
    if(window.scrollY > 500) {
        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));


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

CSS

- to-top 아이디 요소에 대한 스타일을 줬다

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