jquery 를 이용하여 화면 맨위로 자연스럽게 올라가는 TOP 버튼 만들기

 

 

 

jquery 를 이용하여 화면 맨위로 자연스럽게 올라가는 기능을 구현해 보겠습니다.

 

 

스크롤을 많이 내리면 맨위로 한번에 올라가는 이벤트가 필요합니다.

한번에 화면 최상단으로 올라가는 방법도 있지만 animation을 사용하여 자연스럽게 올라가는 기능을 구현해 보겠습니다.

 

 

기능 요약

- 스크롤의 위치에 따라서 맨위로 올라가는 버튼을 나타내거나 사라지도록 한다.

- 맨위로 올라가는 버튼을 클릭하면 자연스럽게 화면 최상단으로 이동한다.

 

 

jquery import는 필수입니다.

 

 

 

1. Html A 태그를 만듭니다.

버튼도 관계없습니다.

필자는 A 태그로 작성하였고 설명은 버튼으로 칭하겠습니다.

<a id="MOVE_TOP_BTN" href="#">TOP</a>

 

 

 

2. CSS style을 작성합니다.

<style>
a#MOVE_TOP_BTN {
    position: fixed;
    right: 2%;
    bottom: 50px;
    display: none;
    z-index: 999;
}
</style>

3# : 화면에 고정

4#, 5# : 버튼의 위치 설정

6# : 화면에서 숨김

7# : 다른 태그들보다 위로 오도록 설정(z-index 가 설정된 다른 태그가 있다면 그 태그보다 커야 함)

 

 

3. script 를 작성합니다.

<script>
    $(function() {
        $(window).scroll(function() {
            if ($(this).scrollTop() > 500) {
                $('#MOVE_TOP_BTN').fadeIn();
            } else {
                $('#MOVE_TOP_BTN').fadeOut();
            }
        });
        
        $("#MOVE_TOP_BTN").click(function() {
            $('html, body').animate({
                scrollTop : 0
            }, 400);
            return false;
        });
    });
</script>

3# : scroll 함수를 이용

4# ~ 8# : 스크롤 위치에 따라 화면에서 맨위로 올라가는 버튼을 나타내고, 사라지도록 설정

11# : 버튼 클릭 이벤트

12# : animation 을 걸어서 화면 맨위로 이동하도록 설정