블로그 화면 맨 위로 가는 버튼 넣기::어나일언덕

블로그 화면 제일 위로 가기 버튼 넣는 방법

블로그 운영을 잘하려면 블로그를 방문하는 사람들에게 글을 읽는데 편의성을 제공하는 것이 중요합니다.

글을 다 읽고 난 뒤 다시 위로 올려 내용을 확인해야 할 경우가 생겼을 때 글이 짧으면 상관없지만 그렇지 않다면 귀찮은 마우스 휠질을 해야 합니다.

그래서 화면 아래쪽에 한번 클릭으로 화면 맨 위로 한번에 올릴 수 있는 버튼을 넣는 방법에 대해 알려 드리겠습니다.

화면 맨위로 넣기 버튼 만들기

화면 맨위로 가기

위와 같이 화면 아래에 버튼 아이콘을 넣을려고 하는데 아래에 3개의 코드를 붙여넣기만 하면 됩니다.

물론 붙여 넣을 장소는 블로그 관리에서 HTML/CSS 편집창입니다.

Icon Link

첫번째로 복사할 코드 입니다.

1
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
cs

우선 이코드는 버튼 중간의 화살표 아이콘을 사용할 수 있게 해주는 코드입니다. 웹폰트 아이콘을 사용하겠다고 선언해주는 것인데 이것을 HTML 편집창의 화면 위쪽 [ <head> 요기다 </head> ] head 태그 사이에 집어 넣어 주면 됩니다.

블로그에 따라서는 이 코드가 이미 있다면 이부분은 건너뛰어도 되겠습니다. 하지만 없다면 이것을 이용해서 블로그를 꾸며 볼 수 있는데 자세한 정보는 블로그 사이드바 메뉴 이름에 아이콘 달기 를 참고하기 바랍니다.

Script

다음으로 버튼의 Script 입니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!-- 화면 맨위로 가기 버튼 -->
<a href="#" class="go-top"> <!--hidden-xs hidden-sm-->
<i class="fa fa-arrow-up" aria-hidden="true"></i>
</a>
<script>
$( document ).ready( function() {
$( window ).scroll( function() {
if ( $( this ).scrollTop() > 200 ) {
$( '.go-top' ).fadeIn();
} else {
$( '.go-top' ).fadeOut();
}
} );
$( '.go-top' ).click( function() {
$( 'html, body' ).animate( { scrollTop : 0 }, 400 );
return false;
} );
} );
</script>
    
Colored by Color Scripter
cs

이것을 복사하여 나중에 찾기 쉽도록 HTML 편집창 맨아래 </body. 태그 바로 앞에다가 붙여 줍니다.

CSS

마지막으로 버튼을 꾸며줄 CSS 코드 입니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.go-top {
    position: fixed;
    right: 15px; /* 가로 위치 조절 : 화면우측에서 떨어진 정도 값*/
    bottom: 15px; /* 세로 위치 조절 : 화면바닥에서 떨어진 정도 값 */
    border-radius: 5px; /* 아이콘의 둘레 둥근모양 설정 클수록 원형에 가까워짐 */
    color: #ffffff; /* 화살표 색깔 */ 
    text-align: center; /* 화살표 좌우 위치 */
    width: 45px; /* 아이콘 가로 크기 값 */
    height: 45px; /* 아이콘 세로 크기 값 */
    font-size: 40px; /* 화살표 크기 */
    background-color:#323232; /* 버튼 배경 색깔 */
    z-index: 999;
    display: none;
}
.go-top:hover{
    background-color:#111; /* 버튼에 마우스 올렸을 때 배경 색깔 */
}
Colored by Color Scripter
cs