해당 블로그에 적용된 탑(Top) 버튼 테스트 영상
위 영상과 같이 사용자가 일정한 길이만큼 스크롤을 통해 아래로 내려갔을 경우 자동으로 원하는 위치(가장 윗부분)에 부드럽게 이동시켜주는 기능을 하는 버튼을 만들어 보겠습니다.
탑 버튼은 직접 HTML 문서에 태그를 작성한뒤 대상 태그의 스타일을 CSS문서에 추가하고, 해당 태그의 기능은 Jquery 스크립트로 작성합니다.
⧫ 기능 정의
1. 일정한 세로 길이 만큼 아래로 내려갈 경우 탑 버튼 활성화
2. 일정한 세로 길이 만큼 되돌아 가거나, 탑 버튼을 실행했을 경우 탑 버튼 비활성화
3. 탑 버튼 활성시 해당 페이지의 모든 객체보다 위에 등장한다.
4. 탑 버튼 실행시 부드럽게 원하는 위치로 이동한다.
⧫ 소스 코드
1. HTML
1
|
<a href='#' id='Top_Bt'>TOP</a>
|
- 가장 간단한 방법은 위와 같이 앵커 태그 하나만 만드는 경우 입니다.
태그 아이디를 정하고 앵커는 본페이지 그대로 두시면 됩니다.
그외에도 탑버튼을 이미지로 하시고 싶으실 경우엔 이미지 태그로 하셔도 깔끔합니다.
2. CSS
1
2
3
4
5
6
7
8
|
a#Top_Bt{
position: fixed;
right: 22px;
bottom: 22px;
display: none;
z-index: 100;
}
/* background: #ddd url(https:image url) no-repeat center center; */
|
- 스타일 시트에서는 위에서 정한 탑버튼의 아이디를 따와서 필수적인 스타일 설정을 했습니다.
2# : 탑버튼의 위치를 항상 고정하도록 합니다.
3# ~ 4# : 고정된 탑버튼의 위치를 지정합니다. 저는 오른쪽 아래에 두도록 했습니다.
5# : 탑버튼은 필요할때 활성화 되도록 기본값은 숨김으로 했습니다.
6# : 탑버튼위 위치를 가장 윗쪽으로 두기 위한 설정입니다. 숫자는 왠만한 큰 값이면 상관없습니다.
8# : 만약 탑버튼을 이미지로 하고 싶으실 경우엔 이미지 주소만 넣으시면 됩니다.
3. Jquery
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() > 280) {
$('#Top_Bt').fadeIn();
} else {
$('#Top_Bt').fadeOut();
}
});
$("#Top_Bt").click(function() {
$('html, body').animate({
scrollTop : 0
}, 280);
return false;
});
});
</script>
|
- 본격적인 탑버튼 기능 구현입니다.
3# ~ 9# : 윈도우 스크롤 이벤트 발생시 280을 기준으로 그보다 많이 이동하였으면 탑 버튼 활성화, 그 이하일 경우엔 탑 버튼 비활성화 하도록 하는 기능 정의 입니다.
11# ~ 16# : 탑 버튼 클릭시 에니메이션 함수를 이용하여 윈도우 최상단으로 이동하는 기능 정의 입니다.
⧫ 구글 블로그에 탑버튼 구현
위 소스를 가지고 구글 블로그에 구현해 보도록 하겠습니다.
3. 블로그 관리 화면으로 돌아와서 테마 - 맞춤설정에 들어간 뒤 고급템에서 CSS 소스를 넣습니다.
4. HTML의 스크립트 구분에나 위와 같이 가젯에 스크립트 정의를 넣고 저장합니다.
오타나 잘못된 내용에 대한 문의는 언제나 환영 입니다.
블로그 관련 다른 포스트 보러가기
