[따라만들기] back to top 버튼

https://youtu.be/Vm9ZDyNiq7g

 

 

 

흐름

1. 스크롤의 현재 위치 찾기

2. 스크롤이 맨 위가 아니라면 backTop 버튼 활성화합니다.

3. backTop 버튼을 클릭하면 스크롤바가 천천히 위로 올라갑니다.

 

 

 

scrollTop

scrollTop을 이용해서 현재 스크롤 위치를 알아옵니다.

scrollPos = document.documentElement.scrollTop;

 

className

scrollTop이 0이면 맨 위가 아니면 backTop 버튼에 "visible" 클래스 이름 추가합니다. 

이렇게 하면 visible 클래스 이름이 활성화 되어 CSS에서 설정한 display 속성이 활성화 되어 보여지게 됩니다.

backTop.className = "visible";

document.getElementById('ex').className;

element.className 속성은 element의 클래스 이름을 문자열로 리턴합니다.

 

 

scrollBy()
지정된 픽셀 수 만큼 문서 스크롤 이동시킵니다.

window.scrollBy(xnum, ynum)

xnum : 가로 이동 픽셀수
- 양수 : 오른쪽으로 이동
- 음수 : 왼쪽으로 이동 

ynum : 세로 이동 픽셀수
- 양수 : 아래로 이동
- 음수 : 위로 이동

 

스크롤이 맨 위가 아니라면 setInterval( )을 통해서 -55px만큼 천천히 y축으로 올라가게합니다.

맨 위라면 clarInterval( )을 통해서 setInterval( )을 중단시켜줍니다.

const scrollInterval = setInterval(function () {
    if (scrollPos !== 0) {
        window.scrollBy(0, -55)
    }
    else {
        clearInterval(scrollInterval);
    }
}, 15)

 

전체코드

<script>
    const backTop = document.querySelector("#back-to-top");

    function checkScoll() {
        scrollPos = document.documentElement.scrollTop;

        if (scrollPos > 0) {
            backTop.className = "visible";       //맨 위(0) 아니면 버튼 보이기
        }
        else {
            backTop.className = "";
        }
    }

    function moveBackTop(event) {
        event.preventDefault();                 //a태그의 고유 기능 막아주기

        const scrollInterval = setInterval(function () {
            if (scrollPos !== 0) {
                window.scrollBy(0, -55)
            }
            else {
                clearInterval(scrollInterval);
            }
        }, 15)
    }

    window.addEventListener('scroll', checkScoll);          // 스크롤 이벤트 추가
    backTop.addEventListener('click', moveBackTop);         // 클릭 이벤트 추가
</script>

 

다른버전

scrollTo()

Window.scrollTo()문서의 특정 좌표 세트로 스크롤합니다.

window.scrollTo(x-coord, y-coord)
window.scrollTo(options)
//x-coord왼쪽 상단에 표시하려는 문서의 가로 축을 따라 있는 픽셀입니다.
//y-coord왼쪽 상단에 표시하려는 문서의 세로 축을 따라 있는 픽셀입니다.

//----------------------
window.scrollTo({
  top: 100,
  left: 100,
  behavior: 'smooth'
});
//option을 통해서 세세하게 조절 가능합니다.

 

scrollTo( )를 이용해서 top: 0으로 천천히 올라가게 조정합니다.

    <script>
        const backTop = document.querySelector("#back-to-top");

        function checkScoll() {
            scrollPos = document.documentElement.scrollTop;

            if (scrollPos > 0) {
                backTop.className = "visible";       //맨 위(0) 아니면 버튼 보이기
            }
            else {
                backTop.className = "";
            }
        }

        function moveBackTop(event) {
            event.preventDefault();                 //a태그의 고유 기능 막아주기

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


        window.addEventListener('scroll', checkScoll);          // 스크롤 이벤트 추가
        backTop.addEventListener('click', moveBackTop);         // 클릭 이벤트 추가


    </script>