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

 

 

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

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

 

 

기능 요약

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

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

 

 

jquery import는 필수입니다.

 

 



 

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

버튼도 관계없습니다.

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

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

 

 

 

2. CSS style을 작성합니다.

1
2
3
4
5
6
7
8
9
<style>
a#MOVE_TOP_BTN {
    position: fixed;
    right: 2%;
    bottom: 50px;
    display: none;
    z-index: 999;
}
</style>
cs

3# : 화면에 고정

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

6# : 화면에서 숨김

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

 



 

3. script 를 작성합니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<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>
cs

3# : scroll 함수를 이용

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

11# : 버튼 클릭 이벤트

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

 

by 개발자 CofS 2016.04.21 14:53
  • Favicon of http://blog.naver.com/aa105965?22081 BlogIcon 좋은날 2016.06.11 13:36 신고 ADDR EDIT/DEL REPLY

    좋은 정보 잘보고 갑니다

  • 궁금 2017.11.07 18:32 신고 ADDR EDIT/DEL REPLY

    a 태그로 특정 ID로 스무스하게 이동하게 하려면 어떡해야 하나용?

    • Favicon of http://cofs.tistory.com BlogIcon 개발자 CofS 2017.11.08 09:55 신고 EDIT/DEL

      http://cofs.tistory.com/191

      이 포스팅을 참고하시면 될거같습니다 ^^

  • 알랙스 2017.12.09 22:43 신고 ADDR EDIT/DEL REPLY

    좋아여!