Home > 고객센터 > 자료실

자료실

카테고리

자료실 [jQurery]맨위, 맨아래로 보내는 버튼(TOP버튼): 2020-08-14 10:54:46

하나솔루션 조회수 800: 122.34.166.44

http://www.hanasolution.net/bbs/order_ad/98398

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;
}
Colored by Color Scripter

			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);
    });
});
Colored by Color Scripter

			cs
		