뉴이스트 공식색 적용시켜본 티스토리 블로그 맨위로가기 TOP 버튼

뉴이스트의 공식색이 딥틸(#00313C)과 비비드핑크(#E31C79) 인데요.

이 공식색을 제 티스토리 블로그의 맨위로가기 TOP 버튼에 적용시켜 봤어요~

공식색을 적용시킬 글씨를 바탕 백그라운드에 그라데이션을 적용시켜야 하는데 그라데이션 적용시키는 방법은 아래 블로그에서 참고했답니다. 

http://thinking1.tistory.com/768 
뉴이스트w 공식 색상 웹에서 css 그라데이션 적용 방법

만들때 사용된 html과 script, css입니다. 

<a href="#" class="go-top">TOP</a>

위의 TOP 글씨 대신 ↑ 화살표를 넣고 싶으시면 위 태그를 아래 태그로 변경해주시면 됩니다.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<a href="#" class="go-top"> <!--hidden-xs hidden-sm-->
<i class="fa fa-arrow-up" aria-hidden="true"></i>
</a>

아래의 스크립트와 CSS를 추가하시면 됩니다.

<!-- 화면 맨위로 가기 버튼 -->
<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>

/* CSS */
.go-top {
    position: fixed;
    right: 15px; /* 가로 위치 조절 : 화면우측에서 떨어진 정도 값*/
    bottom: 15px; /* 세로 위치 조절 : 화면바닥에서 떨어진 정도 값 */
    border-radius: 5px; /* 아이콘의 둘레 둥근모양 설정 클수록 원형에 가까워짐 */
    color: #ffffff; /* 글자 색깔 */ 
    text-align: center; /* 글자 좌우 위치 */
    width: 45px; /* 아이콘 가로 크기 값 */
    height: 45px; /* 아이콘 세로 크기 값 */
    font-size: 40px; /* 글자 크기 */
    background: linear-gradient(to bottom right, #00313C, #E31C79); /* 버튼 배경 색깔 */
    z-index: 999;
    display: none;
}

티스토리 html 적용 화면

티스토리 CSS 적용 화면

 

 

적용 후 제 티스토리 블로그의 맨위로가기 TOP버튼입니다.

PC화면입니다.

모바일 화면입니다.

둘다 다 적용이 잘 되었네요^^