[작품] - JS로 스크롤 따라오는 플로팅 버튼 만들기

오늘은 순수 자바스크립트로 스크롤을 따라오는 버튼을 만들것이다.  

인터넷에 많은 플로팅 버튼 만드는 코드가 있지만 대부분 JQuery로 되있어서 찾다가 못찾아서 내가 직접만들었다.

처음 만들다 보니 막막했는데 구현해 보니깐 되게 간단해서 놀라웠다. 

const bar = document.querySelector(".remote_Bar");
    
window.addEventListener('scroll', function(){
    bar.style.top = `${window.scrollY}px`;
    bar.style.transition = "all 0.7s ease-out";
    if(window.scrollY===0){
      bar.style.top = '100px';
    }
})

1. scroll을 움직일 때마다 이벤트가 발생하는 함수를 만든다. 

2. bar의 top 속성이 window.scrollY에 따라서 바뀐다.

window.scrollY -> 스크롤이 내려가면 값이 증가하고 올라가면 값이 감소한다. 초기값은 0이다. 

3. bar의 css 속성에 transition을 줘서 변화할때마다 움직임을 어떻게 줄지 정한다.

4. 만약 스크롤이 0(맨 위)이면 bar.style.top 값을 100으로 줘서 문서 맨 위로 부터 떨어지게 만든다.

성공 화면