디자인검색
Home > 고객센터 > 자료실

자료실

자료실 [jQurery]맨위, 맨아래로 보내는 버튼(TOP버튼)
2020-08-14 10:54:46
하나솔루션 조회수 226
122.34.166.44

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
 

HANASOLUTION

SERVER LOCATION

서울시 서초구 서초동 1710-1 SK 브로드밴드 IDC 1층

이미지명

WORKING HOURS

NAME SERVER

 1    ns1.webit.kr
  211.215.17.210
 2    ns1.webit.kr
  211.215.17.212
상단으로 바로가기