나의 첫 웹사이트 만들기_(3)

 코드 🔽

https://github.com/Bluishhot-Star/WEB/tree/master/Firstpage

 

이번에는 JS를 처음으로 적용시켜보았다.

아직 react나 vue를 다뤄보지 않아서

vanilla JS로만 구현을 해볼 예정이다.

 

그 처음으로

스크롤을 한 번에 올려주는 버튼을 만들어보았다.

 

 Back-to-top 버튼 

화살표 아이콘은

FontAwesome에서 가져왔다.

https://fontawesome.com/icons

 

화살표 뒤의 둥근 원에는

position: fixed 를 적용해서

문서의 흐름을 벗어나게 하였고,

z-index: 999로 최상단에 위치하도록 했다.

 

버튼::after에는 다음과 같이 적용을 해주어서

아이콘을 적용했다.

#backtotop::after{
    content : "\f077"; /*유니코드*/
    font-family: FontAwesome; /*다음과 같이 써주어야 적용됨*/
    font-size: 1.5rem;
    line-height: 40px;
    color: white;
}

 

back-to-top 버튼은

스크롤이 가장 위에 있을 때에

존재이유가 없기 때문에 보이지 않게 해주었다.

 

이를 위해서 새롭게 다뤄본 것은

pageYOffset이다. (scrollY와 동일함)

window 프로퍼티이고 현재 스크롤의 Y좌표를 반환한다.

pageYOffset이 0일 때가 최상단에 위치하는 것이다.

let scrollY = window.pageYOffset

 

그리고 최상단으로 스크롤을 이동하는 것을 위해서

scrollTo를 다뤄보았고

인자로 좌표와 부드럽게 이동할 지를 넣어줄 수 있다.

 window.scrollTo({top: 0, behavior: "smooth"})

---

실행할 때 적용한 애니메이션은

translate와 rotateY를 이용해서

만들어보았다.