본문 바로가기

블로그 관련 정보/블로그 꾸미기

TOP으로 이동버튼 달기 -티스토리 블로그

TOP으로 이동버튼 달기 -티스토리 블로그
광고 차단 플러그인을 꺼 주시면 블로그 운영에 도움이 됩니다. ^^

본문 내용이 길어지면서 브라우저 스크롤이 생기면 화면 오른쪽 하단에 저절로 아이콘이 생기고 아이콘을 클릭하면 부드럽게 페이지 최상단으로 이동하는 스크립트 설치방법입니다.


현재 제 블로그에 설치되 있는 스크립트 입니다.


일반 접속자는 얼마나 사용하는지 통계는 없지만 관리를 하는 제 입장에선 아주 유용하게 사용하고 있답니다.

무엇보다 간단하게 적용이 가능해서 편리하답니다.^^


소스의 출처는 아래 링크를 참고 하세요. 카테고리를 보시면 다양한 스크립트를 제공합니다.



이동해 보시면 스크립트 적용방법 + 필요한 자료를 제공합니다. 다운하셔서 사용하셔도 되고 제가 올려드린 첨부파일을 사용하셔도 됩니다.


그리고 적용하고자 하는 스크립트을 미리 보실수 있습니다. 링크로 접속하셔서 스크롤을 아래로 내리시면 오른쪽 하단에 아이콘이 뜨는것을 보실수 있습니다.


첨부파일 다운 : scrolltopcontrol.zip

  

제가 첨부한 자료를 다운로드하셔서 사용하시든 원본 링크사이트에서 다운로드 하셔서 사용하시든 일단 소스 수정을 하셔야 합니다.


소스 수정은 에디트 플러스로(에디트플러스 3)하겠습니다. 사용하시는 편집 프로그램이 있으시다면 그것을 사용하셔도 됩니다.


설명은 제가 첨부한 파일 기준입니다.


scrolltopcontrol.js 파일을 편집프로그램으로 열어 위 표시한 부분을 수정하시면 됩니다. "이미지 경로/up.png"에 이미지 링크 주소를 넣어주시면 됩니다.


스크롤이 생기면 자동으로 나오는 이미지경로 주소를 알아 보겠습니다. 티스토리 블로그는 이미지 주소 찾기가 쉽다면 쉽고 어렵다면 어렵지요.


HTML/CSS 편집 -> 파일업로드 를 선택하셔서 up.png파일을 올려주세요.


업로드된 up.png파일에 마우스 커서를 두고 오른쪽 버튼을 눌러 "속성"을 선택하세요.


주소란에 파란색으로 표시한 부분이 이미지 주소랍니다.


구글 크롬브라우저에서는 마우스 오른쪽 버튼을 눌러 "요소 검사"를 선택하시면 하단에 주소가 나옵니다.


이미지 경로를 이렇게 복잡하게 절대경로를 찾아서 넣어주는 이유는 간단하게 ./images/로 지정할 경우 이미지를 못 불러오는 경우가 있기 때문입니다.


width:32px; height:32px 는 이미지 크기를 지정해 주는것인데  이미지를 바꾸지 않을때는 그냥 사용하셔도 됩니다. 그러나 다른 이미지를 사용하실려면 이미지 사이즈도 수정해 주셔야 합니다.


그리고 스크롤을 내리시면 " attr({title:'위로이동'})"란이 있는데 이미지에 마우스커서를 두면 보이는 설명글 입니다. 이 부분은 그냥 사용하셔도 됩니다.


티스토리 블로그에  소스 적용해 보기


소스 수정은 마무리 되었습니다. 이제 적용해 보겠습니다.

위에서 이미지 경로를 추출하기 위해 "up.png"파일 업로드를 하셨지요. 같은 방법으로 수정된 "scrolltopcontrol.js"파일을 업로드 해 주세요. 


그리고 HTML/CSS 편집 -> HTML/CSS을 선택 하세요.


윈문에서는 소스를 <HEAD> 섹션에 아래에 넣으라고 합니다. 하지만 전 HTML소스 맨 하단에 넣었습니다. 블로그 로딩시 최대한 쾌적함을 주기위한 방법입니다.


적용할 소스는 아래와 같습니다.


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript" src="./images/scrolltopcontrol.js"></script>


이 두줄만 넣어주시면 됩니다. 


제가 소스를 넣은 위치 입니다. 맨 하단 "< / body>" 바로 위에 넣어 주었답니다.

이미지와는 달리 "scrolltopcontrol.js"파일은 상대 경로로 입력해도 잘 불러 오니 간단하게 ./images/scrolltopcontrol.js 경로를 주었습니다.


이제 저장하시고 새로고침을 해보시면 스크롤을 내렸을때 화면 오른쪽 하단에 이동 아이콘이 뜨는것을 보실수 있습니다.


간단 팁 !!


위 소스가 적용된 상황에서  텍스트로 이동 링크를 사용할수 있습니다.


<a href="#top">위로 이동</a>


위 소스를 원하는 곳에 넣어 주시면 됩니다.  제 블로그에도 적용한 부분이 있는데 바로 이곳 입니다.


 

댓글 창 하단에 적용된 모습입니다.


이상으로 글 마무리 합니다. 간단한데 글로 표현하니 엄청 복잡하게 보이네요. -.-