[JS 포트폴리오 만들기] 페이지 상단으로 바로 이동하는 버튼 만들기

2022.03.21

 

 

---

🤔❓ 스크롤 후 상단으로 바로 이동할 수 있는 버튼을 만들자

스크롤을 한 후 상단으로 이동하고싶을 때, 바로 이동할 수 있는 버튼을 창 하단에 만드려고 한다.

 

---

😃❗아래에서 확인해보자

 

1) 버튼이 창 하단에 계속 위치하도록 만든다.

(1) 추가하는 버튼은 html 가장 하단에 정의해야한다.

- 그렇지 않으면 페이지 전체에 해당 내용이 적용이 안된다.

<!-- arrow btn -->
  <button class="arrowBtn">
    <i class="fa-solid fa-arrow-up"></i>
  </button>
</body>

 

(2) 상단으로 이동하는 버튼이 스크롤 되어도 창 하단에 계속 위치하도록 css를 이용하여 만들었다.

/* arrow btn */
.arrowBtn {
  /*모양을 동그랗게 만듬*/
  width: 50px;
  height: 50px;
  background-color: var(--color-pink);
  border-radius: 50%;

  margin-left: auto;

  /* 하단에 붙어있도록 만듦 */
  display: flex;
  position: sticky;
  bottom: 20px;
  right: 20px;
}


.arrowBtn > i {
  margin: auto;
  text-align: center;
  font-size: var(--font-medium);
  color: var(--color-dark-gray);
}

하단에 위치하도록 position: sticky를 이용했다.

처음에는 헷갈려서 fixed를 썼는데 

 

 

2) 처음엔 안보이다가 일정부분 스크롤 되면 보이도록 만들자

이건 두가지로 표현했다. 누를 때 마다 클래스를 추가하고 제거하는 것과 opacity값을 바꾸는 것.

 

(1) classList.add / remove

//arrow btn
const arrowBtn = document.querySelector('.arrowBtn');

document.addEventListener('scroll', () => {
  //홈높이의 반정도 스크린이 위치했을 때, 상단으로 올라가는 버튼을 보이도록 만들었다.
  if( homeHeight/2 < window.scrollY ) {
    arrowBtn.classList.add('visible');
  } else {
    arrowBtn.classList.remove('visible');
  }
});

제일 처음으로는 HTML에서 정의한 클래스를 JS로 불러온다.

그리고 해당 페이지(document)에 홈높이의 반정도 스크린이 스크롤 됐을 때,

상단으로 이동하는 버튼에 'visible'이라는 클래스를 추가하고

그렇지 않으면 'visible'이라는 클래스를 제거하도록 만든다.

 

.arrowBtn.visible {
 
 .....

}

그렇기 때문에 앞에서 정의한 css에 html 상에서 해당 버튼이 visible일 때 조건이 적용되도록 클래스를 추가해준다.

 

(2) opacity

document.addEventListener('scroll', () => {

  if( homeHeight/2 < window.scrollY ) {
   arrowBtn.style.opacity = 1;
  } else {
   arrowBtn.style.opacity = 0;
  }
})

1번에서와 동일하나, 클래스를 넣고 빼는 대신에 투명도를 바꿔줬다.

투명도를 조절해주는 조건을 css에서 적용할 수도 있었지만 js내에 css문법을 넣을 때 이렇게 넣는구나!를 체험?해보기 위해 위와 같이 코드를 구성했다.

 

.arrowBtn {
 
 ....
 opacity: 0;
 
}

css에서 opacity기본값을 0으로 줘서 평소엔 안보이도록 만들었다.

 

 

3) 버튼이 부드럽게 나타나도록 만들고 싶다.

버튼이 뿅하고 나타났다가 뿅하고 사라지니까 뭔가 부드럽게 애니메이션이 보이도록 만들고 싶어졌다.

 

css에서 상단버튼 클래스(arrowBtn)에다가 transition 옵션을 넣어줬다.

 

  arrowBtn {
  ...
  	transition: all 200ms ease-in-out;
  ...
  }

 

2번에서 2가지 경우로 코드를 만들었는데

class를 추가하면 button 모양이 사각형에서 원모양으로 바뀌는 것도 애니메이션으로 보여진다. (왜냐면 사각형 button을 동그라미로 만들기 위해 border를 50%를 줬기 때문)

하지만 opacity로 하면 모양변화없이 버튼이 나타난다.

class로 구현했을 때의 버튼 애니메이션

opacity로 구현했을 때의 버튼 애니메이션

뭔가, 사각형에서 동그라미로 변하는 것도 마음에 드는 것 같다... 라고 생각했는데 다시 구동해보니 opacity가 더 자연스럽고 괜찮은 것 같다.

 

 

4) 버튼을 누르면 상단으로 올라가도록 만들자

arrowBtn.addEventListener('click', () => {
  window.scrollTo({
    top: 0,
    behavior: "smooth"
  })
});

 

scrollTo를 이용하여 버튼을 누르면 top:0 인 값으로 올라가도록 만들었다.

갑자기 뿅 하고 이동하면 당황스러우니까 부드럽게 이동하도록 behavior를 넣어주었다.

 

 

5) 완성

 

굳 아주 잘 작동한다.

그럼 다음 스텝으로 넘어가보도록 하자!

---

eunne's github: https://github.com/eunne/Project_Portfolio.git