[project] web portfolio site _ JS scroll to top

이번에는 페이지 하단에 위로 올라가기 버튼을 만들어 보았다.

 

1. 화살표 아이콘 추가하기(font-awsome 사용)

2. css로 꾸며주기

2-1. *position: fixed* / sticky가 아니었다!!

2-2. display : none 대신 opacity: 0 /1 을 사용하면, 애니메이션 효과를 추가할 수 있다.

2-3. opacity : 0 을 사용시, 화살표가 투명해졌을 때, 클릭이 가능하다!!!! -> point-events : none을 통해 커서 포인터를 죽여준다.

2-4. .arrow-up.visible 일때, point-events: auto로 돌려주지 않으면 클릭이 안되버린다....ㅋㅋㅋㅋ

.top-btn{
    position: fixed;
    bottom: 50px;
    right: 50px;
    width: 50px;
    height: 50px;
    font-size: 50px;
    color: var(--color-swift);
    opacity: 0;
    pointer-events: none;
    transition: all 300ms ease-in;
}

.top-btn.visible{
    opacity: 1;  
    pointer-events: auto;
}

 

다음은 JS

사실 스크롤바를 절반정도 내렸을때, to the top 버튼을 보여주는 것은 앞에서 했던 것과 같기 때문에 간단하다.

const topBtn = document.querySelector('.top-btn');
document.addEventListener('scroll', () => {
    if(window,scrollY > homeHeight / 2){
        topBtn.classList.add('visible');
    }else {
        topBtn.classList.remove('visible');
    }
});

그리고 버튼이 나타났을때, 클릭하면 홈으로 이동하도록 해준다.

- addEventListener

- scrollIntoView를 사용한다.