2017년 9월 22일 금요일

블로그(Blogger) 및 웹 페이지의 위치를 수정해주는 탑(Top) 버튼 만들기

해당 블로그에 적용된 탑(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# : 탑 버튼 클릭시 에니메이션 함수를 이용하여 윈도우 최상단으로 이동하는 기능 정의 입니다.



⧫ 구글 블로그에 탑버튼 구현

위 소스를 가지고 구글 블로그에 구현해 보도록 하겠습니다.

1. 블로그 관리 화면에서 테마 - HTML 편집에 들어 갑니다.


2. 위 소스를 <body> 태그안에 넣은후 테마 저장을 합니다.



3. 블로그 관리 화면으로 돌아와서 테마 - 맞춤설정에 들어간 뒤 고급템에서 CSS 소스를 넣습니다.



4. HTML의 스크립트 구분에나 위와 같이 가젯에 스크립트 정의를 넣고 저장합니다.


오타나 잘못된 내용에 대한 문의는 언제나 환영 입니다.

블로그 관련 다른 포스트 보러가기
Share:

댓글 2개: