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 |
열기 닫기