본문 바로가기
Study/예제

[back to Top] scrollTo 외 스크롤 관련 함수들

짤랑쓰 2023. 5. 1. 14:43

back to Top

: 문서의 길이가 세로로 긴 경우 화살표 버튼을 생성하고 그 버튼을 클릭하면 화면 상단으로 이동하는 효과

 

 

 

(js)

스크롤 양 확인하기

함수 명 설명
document.documentElement.scrollTop 문서에 발생한 세로 방향의 스크롤 양 확인
window.pageYOffset 윈도우에 발생한 세로 방향의 스크롤 양 확인
window.scrollY window.pageYOffset의 다른이름으로,
윈도우에 세로방향의 스크롤 양을 확인

 

스크롤 양 지정하기

함수 명 설명
document.documentElement.scrooTop = 0 문서의 스크롤 양을 0으로 지정
window.scrollTo(x, y) x축(가로), y축(세로) 방향 스크롤 양을 지정
window.scrollTo(0, 0) 윈도우의 스크롤 양을 0으로 지정
window.scrollBy(0, -50) 세로 방향 스크롤 양을 -50px 축소

 

 

 

 

구현할 내용

1. 스크롤이 생기면 스크롤 양을 확인한다.

 

2. 스크롤 양이 지정한 값보다 많으면 버튼에 클래스 명 active를 추가한다.

    지정한 값보다 작으면 다시 클래스 명을 제거한다.

 

3. 버튼을 클릭하면 스크롤 양을 0으로 변경하며 상단으로 이동한다.

 

 

 

예제)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Back to Top</title>
    <link rel="stylesheet" href="main.css">
    <link rel="stylesheet" href="http://cdn.jsdelivr.net/npm/xeicon@2.3.3/xeicon.min.css">
    <script src="main.js"></script>

</head>

<body>
    <div class="wrapper">
        <h1>Back to Top Animation</h1>
        <main>
            <h2>Main content</h2>
            <article>
                <h3>Article Title</h3>
                <p>
                    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repellendus architecto iusto mollitia
                    aspernatur
                    at explicabo quo odit beatae! Dolore quae ad sint explicabo consequatur! Vel vitae sunt est quidem.
                    Temporibus. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repellendus architecto iusto
                    mollitia
                    aspernatur at explicabo quo odit beatae! Dolore quae ad sint explicabo consequatur! Vel vitae sunt
                    est
                    quidem. Temporibus. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repellendus architecto
                    iusto
                    mollitia aspernatur at explicabo quo odit beatae! Dolore quae ad sint explicabo consequatur! Vel
                    vitae
                    sunt
                    est quidem. Temporibus.Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repellendus
                    architecto
                    iusto mollitia aspernatur at explicabo quo odit beatae! Dolore quae ad sint explicabo consequatur!
                    Vel
                    vitae
                    sunt est quidem. Temporibus.
                </p>
            </article>
            <article>
                <h3>Article Title</h3>
                <p>
                    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repellendus architecto iusto mollitia
                    aspernatur
                    at explicabo quo odit beatae! Dolore quae ad sint explicabo consequatur! Vel vitae sunt est quidem.
                    Temporibus. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repellendus architecto iusto
                    mollitia
                    aspernatur at explicabo quo odit beatae! Dolore quae ad sint explicabo consequatur! Vel vitae sunt
                    est
                    quidem. Temporibus. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repellendus architecto
                    iusto
                    mollitia aspernatur at explicabo quo odit beatae! Dolore quae ad sint explicabo consequatur! Vel
                    vitae
                    sunt
                    est quidem. Temporibus.Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repellendus
                    architecto
                    iusto mollitia aspernatur at explicabo quo odit beatae! Dolore quae ad sint explicabo consequatur!
                    Vel
                    vitae
                    sunt est quidem. Temporibus.
                </p>
            </article>
            <article>
                <h3>Article Title</h3>
                <p>
                    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repellendus architecto iusto mollitia
                    aspernatur
                    at explicabo quo odit beatae! Dolore quae ad sint explicabo consequatur! Vel vitae sunt est quidem.
                    Temporibus. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repellendus architecto iusto
                    mollitia
                    aspernatur at explicabo quo odit beatae! Dolore quae ad sint explicabo consequatur! Vel vitae sunt
                    est
                    quidem. Temporibus. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repellendus architecto
                    iusto
                    mollitia aspernatur at explicabo quo odit beatae! Dolore quae ad sint explicabo consequatur! Vel
                    vitae
                    sunt
                    est quidem. Temporibus.Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repellendus
                    architecto
                    iusto mollitia aspernatur at explicabo quo odit beatae! Dolore quae ad sint explicabo consequatur!
                    Vel
                    vitae
                    sunt est quidem. Temporibus.
                </p>
            </article>
            <article>
                <h3>Article Title</h3>
                <p>
                    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repellendus architecto iusto mollitia
                    aspernatur
                    at explicabo quo odit beatae! Dolore quae ad sint explicabo consequatur! Vel vitae sunt est quidem.
                    Temporibus. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repellendus architecto iusto
                    mollitia
                    aspernatur at explicabo quo odit beatae! Dolore quae ad sint explicabo consequatur! Vel vitae sunt
                    est
                    quidem. Temporibus. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repellendus architecto
                    iusto
                    mollitia aspernatur at explicabo quo odit beatae! Dolore quae ad sint explicabo consequatur! Vel
                    vitae
                    sunt
                    est quidem. Temporibus.Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repellendus
                    architecto
                    iusto mollitia aspernatur at explicabo quo odit beatae! Dolore quae ad sint explicabo consequatur!
                    Vel
                    vitae
                    sunt est quidem. Temporibus.
                </p>
            </article>
        </main>
    </div>
    <a href="#" id="go-top" title="Back to Top">
        <i class="xi-caret-up"></i></a>

</body>

</html>
.wrapper{
    max-width: 960px; 
    width: 85%;
    /* 최대 너비가 960px,
    브라우저의 너비가 960px이하로 축소되면 그 너비의 85%크기를 차지한다*/
    margin: 0 auto;
}

article{
    margin: 4rem auto;
}


/* go-top btn */
#go-top{
    width: 48px;
    height: 48px;
    position: fixed;
    bottom: 48px;
    right: 48px;
    line-height: 48px;
    text-align: center;
    background-color: #444;
    color: #fff;

    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s;
    /* opacity만 낮춰도 보이지는 않지만 그 자리에 커서가 가면 링크가 작동할 수 있기에
    visibility속성으로 안보이게 한다.
    그리고 opacity가 변경되는 과정이 보이도록 하기 위해 transition속성 추가.*/
}

#go-top.active{
    opacity: 1;
    visibility: visible;
    /* active라는 클래스명이 생기면 버튼이 보이도록 한다.*/
}
// HTML의 요소들을 모두 로드한 다음에 function()에 지정한 코드를 실행한다.
document.addEventListener('DOMContentLoaded',function(){
   
   //변수 생성
   let btt = document.querySelector('#go-top'),
    docElem = document.documentElement,
    scrollAmount;
    
    window.addEventListener('scroll', function(){
    // window에 scroll이벤트가 발생하면
        scrollAmount = docElem.scrollTop;
        // 변수명 scrollAmount에 저장하고
        if(scrollAmount > 100){
            btt.className = 'active';
        // 그 값이 100보다 많으면 변수명 btt에 active를 추가하고
        } else {
            btt.classList.remove('active');
        } // 스크롤 양이 100보다 적으면 btt에서 active를 제거.
        
    });


    btt.addEventListener('click', function(e){
    //변수명 btt를 클릭하면 클릭된 요소의 기본속성을 매개변수e로 저장
        e.preventDefault(); // 링크 기본 속성 막기
        window.scrollTo({
            top: 0,
            left: 0,
            behavior:'smooth'
        });
        // HTML의 링크기능이 아니라 자바스크립트를 통해 부드럽게 상단으로 이동시키기
    });

});

 

 

 

 

완성

 

 

저작자표시 (새창열림)

'Study > 예제' 카테고리의 다른 글

[예제] 디자인 된 웹 페이지 구현하기 (순서, tip)  (0) 2023.05.03
[slideshow] innerHTML, innerText, 템플릿 리터럴(``) 외 슬라이드 관련 함수들  (0) 2023.05.01
[modal] data-, pointer-events, getAttribute, setAttribute  (0) 2023.05.01
[accordion] classList.add , classList.remove  (0) 2023.04.27
[tab] forEach, e.preventDefault(), offsetLeft, offsetWidth  (0) 2023.04.27

'Study/예제' Related Articles

티스토리툴바