[HTML] 티스토리 스크롤 진행 바 적용하기

이번 글에서는 티스토리 내에서 스크롤 진행바를 상단에 표시하는 방법에 대하여 다루겠습니다.

 

 

# 티스토리 스크롤 진행바의 필요성

  일반적으로 PC를 사용하는 방문자들은 화면의 우측에 스크롤바가 표시되어 지금 현재 있는 위치가 이 웹페이지의 어느정도 구간인지를 알 수 있습니다. 하지만, 모바일로 접속한 방문자나 맥북을 이용하는 방문자의 경우에는 스크롤 바가 없기 때문에 현재 위치에 대한 정보를 한 화면에서 얻을 수 없습니다. 따라서, 스크롤 진행바의 적용은 여러가지 방문 경로에 대응할 수 있는 수단인 것입니다.

• 현재 보고계신 이 웹페이지를 따라서 스크롤을 내리시면 상단에 있는 스크롤바가 움직이고 있습니다. 그것이 바로 스크롤 진행바 입니다.

 

# 티스토리 스크롤 진행바 적용방법

  아래 적어둔 코드를 HTML 스킨 편집에서 head 부분에 넣으시는 것으로 스크롤 진행바의 적용이 끝이 납니다.

<!--진행바 스크립트 시작-->
<script type="text/javascript" src="https://rawcdn.githack.com/mburakerman/prognroll/0feda211643153bce2c69de32ea1b39cdc64ffbe/src/prognroll.js"></script>
<script type="text/javascript">
    $(function() {
        $("body").prognroll({
            height: 5,
            color: "#0593d3"
        });
        $(".content").prognroll({
            custom: true
        });
    });
</script>
<!--진행바 스크립트 종료-->

 

  여기서 팁을 드리자면, '색'이라는 것은 통일성을 가질 때에 시각적인 효과가 극대화 됩니다. 여러분이 글을 작성하시거나 웹페이즈를 꾸며나가실 때에 웹페이지에서 주로 사용하는 '색상'이 있을 것입니다. 그 색상을 스크롤 진행바에 적용하시는 것이 시각적인 통일성을 줍니다. 

 

  네이버의 경우에는 초록색을, 줌의 경우에는 판색을 사용하듯이 우리 또한 하나의 색상을 통일성 있게 사용해야 합니다.

 

  자신이 주로 사용하는 색상을 아는 방법은 F12 를 눌러서 크롬 개발 도구로 자신의 웹페이지에서 색이 바뀌어있는 부분을 '클릭'하여 아래와 같은 코드를 기억해두어 원하는 색상의 코드로 바꾸시면 됩니다.

<색상 적용 부분>
$("body").prognroll({
            height: 5,
여기 입니다.-> color: "#0593d3"
        });

 

이번 글에서는 티스토리 내에서 스크롤 진행바를 상단에 표시하는 방법에 대하여 다루었습니다.