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

2016. 4. 21. 14:53language/jquery

 

 

 

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 을 걸어서 화면 맨위로 이동하도록 설정

 

  • 프로필사진
    Favicon of http://blog.naver.com/aa105965?22081 BlogIcon 좋은날2016.06.11 13:36

    좋은 정보 잘보고 갑니다

  • 프로필사진
    궁금2017.11.07 18:32

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

  • 프로필사진
    알랙스2017.12.09 22:43

    좋아여!

  • 프로필사진
    지닝지닝2020.02.04 09:27

    와 대박입니당 감사해요!

  • 프로필사진
    강한솔2020.05.11 15:40

    안녕하세요 ㅎㅎ 푸터까지 내려가는 top버튼을 일정위치 까지만 내려가면 멈추게 하고싶은데..


    $("#btn_top").click(function() {
    $('html, body').animate({
    scrollTop : 0
    }, 400);
    return false;
    });

    여기서 어떻게 해야 푸터 위까지만 top 버튼위치가 고정될 수있게 할 수있을까요?

    • 프로필사진
      Favicon of https://cofs.tistory.com BlogIcon 개발자 CofS2020.05.11 15:52 신고

      안녕하세요 ^^
      top 버튼은 움직이는게 아니라 화면에 고정되어 있습니다.
      top 버튼을 일정 위치까지만 내려가고 멈추게 하고 싶으다는게 잘 이해가 안되는데 위 소스에서는 top 버튼은 움직이지 않습니다 ㅠ

  • 프로필사진
    강한솔2020.05.11 17:09

    네.. 맞아요.. 제가 말을 잘못했네요 화면이 움직이는거네요 하핳
    top버튼이 content있는 부분에서 멈추게 하고싶어요 ㅎㅎ

    • 프로필사진
      Favicon of https://cofs.tistory.com BlogIcon 개발자 CofS2020.05.11 17:21 신고

      위 소스 중 if ($(this).scrollTop() > 500)
      이 부분을 활용하면 될 꺼 같아요
      이 소스는 500 높이를 기준으로 버튼을 나타내거나 숨기는 역할을 하는데
      content의 위치를 구하고 그 위치에 스크롤이 왔을 때 top 버튼의 css를 수정하면 될 꺼 같네요 ㅎㅎㅎㅎ

  • 프로필사진
    강한솔2020.05.12 10:25

    저 이해를 못해써요 ㅠㅠ

    $("#btn_top").click(function() {
    $('html, body').animate({
    scrollTop : 0
    }, 400);
    if ($(this).scrollTop() > 500);
    return false;
    });
    이렇게 해봤는데 변화가 없어요 ㅠㅠ 저소스를 어디다가 추가하면 될까용?

    • 프로필사진
      Favicon of https://cofs.tistory.com BlogIcon 개발자 CofS2020.05.12 13:46 신고

      위 소스는 top 버튼을 고정시킨 후 스크롤 위치에 따라서 출력 또는 사라지게 하는 소스입니다.
      그런데 특정 위치에서 top 버튼을 고정을 해제하려고 하자나요?
      그럼 위 소스 중 스크롤의 위치에 조건이 들어간 부분이 if ($(this).scrollTop() > 500)
      이 부분이고 이 소스를 활용하여 기능을 구현해볼 수 있을 것 같아요
      여기서 500을 본인의 컨텐츠 위치로 변경하세요 (컨텐츠가 동적이라면 동적으로)
      스크롤이 컨텐츠 위치라면 분기문 안에서 top 버튼의 css를 변경하여 화면에 고정되어 있는 top 버튼의 css를 제거하시고 그게 아니라면 다시 css를 추가하여 기존과 동일하게 동작하도록 하시면 될 것 같아요 ^^

  • 프로필사진
    임송이2020.07.08 10:41

    감사합니다!

  • 프로필사진
    헤더2020.07.30 12:56

    안녕하세요~~
    혹시 헤당 버튼으로 페이지 상단이 아니라 외부 URL로 연결 되게 하는 방법 없을까요?