해당 블로그에 적용된 탑(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의 스크립트 구분에나 위와 같이 가젯에 스크립트 정의를 넣고 저장합니다.
오타나 잘못된 내용에 대한 문의는 언제나 환영 입니다.
블로그 관련 다른 포스트 보러가기
감사합니다!
답글삭제남겨주셔서 고마워요 ^^
삭제