카테고리 없음

[jQuery] 맨위, 맨아래로 보내는 버튼 (TOP 버튼)

라떼^^ 2022. 11. 4. 20:42

 

누르면 위나 아래로 이동시켜주는 버튼입니다. 나무위키에도 똑같은 게 있어요.

아무래도 블로그에 스압 페이지가 많다 보니 필수적이라 생각해서 넣어봤습니다.

 

HTML

1
2
<a id="TopButton" class="ScrollButton"><img src="(TopButton 이미지 주소)"></a>
<a id="BottomButton" class="ScrollButton"><img src="(BottomButton 이미지 주소)"></a>
 cs

태그를 만들고 그 안에 <img> 태그를 넣습니다.

<img> 태그 자체를 사용해도 상관은 없습니다.

 

1
<a id="footer"></a>
 cs

그리고 제일 하단에도 태그를 하나 만들어줍니다.

이 또한 <footer> 태그 자체를 사용해도 상관은 없습니다.

 

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.ScrollButton {
position: fixed;   /* 버튼의 위치 고정 */
right: 10px;       /* x 위치 입력 */
cursor: pointer;   /* 호버링 했을 때 커서 모양 변경 */
z-index: 10;       /* 다른 태그에 가려지지 않게 우선순위 변경 */
display: none;     /* 스크롤 위치에 상관없이 보이게 하려면 생략 */
}
 
/* 두 태그에 각각 y 위치 입력 */
#TopButton {
bottom: 108px;        
}
#BottomButton {
bottom: 75px;
}
 cs

 

 

Script

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
$(function() {
    $(window).scroll(function() {
        if ($(this).scrollTop() > 600) {
            $('.ScrollButton').fadeIn();
        } else {
            $('.ScrollButton').fadeOut();
        }
    });
        
    $("#TopButton").click(function() {
        $('html').animate({scrollTop : 0}, 600);
    });
 
    $("#BottomButton").click(function() {
        $('html').animate({scrollTop : ($('#footer').offset().top)}, 600);
    });
});
 cs
 

fadeIn()/fateOut() 함수는 opacity 값을 서서히 변경해주는 함수입니다. (display 값도 변경됩니다.)

animate() 함수는 특정 값을 서서히 변경해주는 함수입니다.

offset() 함수는 특정 태그의 위치값을 반환하는 함수입니다. (top 메서드를 사용하여 y 좌표를 불러옵니다.)

 

작동 설명

1. 스크롤의 값이 바뀔 때마다 스크롤의 값을 계산하여 페이드 인/아웃하는 코드 실행

2. #TopButton 태그를 클릭 시 스크롤을 맨 위로 서서히 이동시키는 코드 실행

3. #BottonButton 태그를 클릭 시 스크롤을 #footer의 위치까지 이동시키는 코드 실행

 

스크롤 값에 상관없이 항상 보이게 하려면 1번 코드는 생략해야 됩니다.

LIST