[ jquery 응용 ] scrollTop animate 버튼 구현하기(Top버튼)

 

 

우측 하단 '위로 가기' 버튼 (Top버튼)

---

모바일이나 다른 사이트에서 자주 보이는 탑버튼은 어떻게 구현될까요?

 

 

요즘 스크롤을 많이 사용하는 사이트들이 많기도 하고

모바일에서 물론 상단으로 이동하는 기능들이 기종/브라우저 별로 가지고 있지만

사이트의 편리 기능으로 아직까지 많이 사용하는 기능입니다.

 

 

단순하게 버튼을 누르면 짠(!) 하고 바로 위로 이동하는 앵커형태로 사용할 수 도 있지만,

정적인것보단 약간의 애니메이션 효과를 추가하여

최상단 일때는 불필요하기에 감추고,

스크롤을 시작하면 버튼을 보여주고,

눌렀을때는 최상단까지 스르륵 올라가도록 구현해 보겠습니다.

 

 

 

HTML 코드

---

<div class="container">
    <div id="topBtn">위로</div>
</div>

 

우선 내용은 없지만 전체를 감싸는 'container'라는 클래스로 객체를 만들고,

그 안에 'topBtn' 이라는 아이디를 가진 div를 생성하였습니다.

현 상태로 화면을 열어본다면 화면에 떨렁 '위로' 라는 텍스트만 나올것 입니다.

 

 

미리보기

 

 

 

CSS 코드

---

 

<style>
    .container {
        height: 200vh; /*화면 사이즈 200% 조정*/
        background: linear-gradient(180deg, rgba(215,93,19,1) 0%, rgba(255,213,79,1) 100%);
    }
    #topBtn { /*Top버튼 스타일 적용*/
        position: fixed;
        right: 20px;
        bottom: 20px;
        width: 40px;
        height: 40px;
        background: #000;
        color: #fff;
        border-radius: 50%;
        text-align: center;
        font-size: 12px;
        line-height: 40px;
        cursor: pointer;
        display: none;
    }
</style>

 

위에서 잡았던 'container'에는 스크롤을 하기위해 화면 크기의 200% 높이로 사이즈를 일부러 주었습니다. 

그리고 위로 올라가는 액션을 보기 위해 그라디언트로 배경색상을 주었습니다.

그리고 버튼에는 조금 여러가지 스타일이 적용되었는데,

우선을 position: fixed로 위치를 우측 20px, 하단 20px에 고정하였고,

크기는 가로 세로 40px짜리 검정색 버튼을 만들었습니다.

그리고 border-radius: 50% 로 해당 버튼을 동그랗게 만들어 주었습니다.

display: none은 이후 jquery를 적용할 때 

스크롤을 할때 보이고 안보이고를 적용하기 위해 최초 안보이는 스타일을 적용하였습니다.

display: none을 제외하고 미리 보신다면 우측하단에 버튼이 고정되어

스크롤을 하더라도 잘 쫓아다니는 버튼을 보실 수 있습니다.

 

 

미리보기

 

 

 

jqeury 코드

---

<script>
$(document).ready(function(){
    $(window).scroll(function(){
        if($(this).scrollTop() > 0) {
            $('#topBtn').fadeIn();
        } else {
            $('#topBtn').fadeOut();
        }
    });

    $('#topBtn').click(function(){
        $("html, body").animate({scrollTop: 0}, 1000);
    });
});
</script>

 

당연하지만 상단에 jquery를 기본적으로 불러와 주셔야 실행이 됩니다.

그다음 document가 준비가 완료 후

window가 스크롤 될 때 실행되는 function과

topBtn 아이디를 가진 버튼을 눌렀을 때(클릭이벤트) 실행되는 function을 작성했습니다.

 

 

처음의 function은 스크롤은 $(this), 즉 window의 scrollTop이 0보다 크다면,

topBtn버튼을 fadeIn을 통해 보여주고, 반대로 0이라면 topBtn을 fadeOut하여 감춰주는 액션입니다.

 

 

그리고 다음으로 클릭이벤트는,

topBtn을 눌렀을 때, html, body의 상단으로 1000(1초)의 애니메이션을 가지면서 스르륵 올라가는 액션입니다.

 

 

미리보기

 

순서대로 html로 구조를 짜고, css로 디자인을 만들고, jquery로 액션을 주었습니다.

다양한 곳에서 사용이 가능한 top버튼

유용하게 사용하셨으면 좋겠습니다.

 

 

 

전체 코드

---

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<style>
    .container {
        height: 200vh; /*화면 사이즈 200% 조정*/
        background: linear-gradient(180deg, rgba(215,93,19,1) 0%, rgba(255,213,79,1) 100%);
    }
    #topBtn { /*Top버튼 스타일 적용*/
        position: fixed;
        right: 20px;
        bottom: 20px;
        width: 40px;
        height: 40px;
        background: #000;
        color: #fff;
        border-radius: 50%;
        text-align: center;
        font-size: 12px;
        line-height: 40px;
        cursor: pointer;
        display: none;
    }
</style>
<div class="container">
    <div id="topBtn">위로</div>
</div>
<script>
$(document).ready(function(){
    $(window).scroll(function(){
        if($(this).scrollTop() > 0) {
            $('#topBtn').fadeIn();
        } else {
            $('#topBtn').fadeOut();
        }
    });

    $('#topBtn').click(function(){
        $("html, body").animate({scrollTop: 0}, 1000);
    });
});
</script>