오늘은 티스토리 블로그에서 스크롤을 따라 이동하는 Top 버튼 만드는 법에 대해 알아보겠습니다. 프로그래밍을 전공하지 않은 사람도 복사/붙여 넣기만 하여 쉽게 적용할 수 있도록 설명해보겠습니다. 글을 다 쓰고 확인해보니 복사가 안돼서 파일을 첨부합니다.
저는 블로그 스킨을 티스토리 기본 스킨인 BookClub을 사용하고 있는데요. Top버튼이 없나 해서 찾아보니 Footer부분 오른쪽에 고정으로 있어서 기존의 버튼은 숨기고, 새 버튼을 추가해줬습니다. 숨기는 방법은 별건 아니고, 해당 버튼의 id를 찾으셔서 그 아이디에 해당하는 css버튼 속성에 display : none;를 추가해주시면 됩니다.
따라다니는 Top 버튼(텍스트) 만들기
HTML
<!--탑 버튼(텍스트)&스크립트-->
<!--탑 버튼(텍스트)-->
<a id="topBtn" href="#">텍스트 넣을자리</a>
<!--버튼 숨김/나타남 스크립트-->
<script>
$(function() {
$(window).scroll(function() {
if ($(this).scrollTop() > 200) {
$('#topBtn').fadeIn(); }
else { $('#topBtn').fadeOut(); }
});
$("#topBtn").click(function() {
$('html, body').animate({ scrollTop : 0 }, 300);
return false; });
});
</script>이건 그대로 복사하셔서 <head>와 </head>안에 넣어주시면 됩니다. 위쪽에 id 안에 이름은 마음대로 변경하셔도 되지만, 변경 시 아래 스크립트의 #이 있는 부분도 모두 바꿔주셔야 하고, 아래 CSS파일 코드도 함께 수정해주셔야 합니다. 기존의 스킨을 사용할 시 기존의 스킨 id와 이름이 겹칠 수 있으니, 복잡한 이름을 사용하셔도 좋습니다.
CSS
/*탑 버튼*/
#topBtn{
position: fixed;
right: 25px;
bottom: 25px;
display: none;
z-index: 9;
}이건 css 부분에 추가해주세요. #뒤에 부분은 위 코드의 id와 일치해야 합니다. 간단하게 설명드리자면, 위치를 고정해서 두겠다는 거고, right과 bottom의 수치를 조정하면 버튼의 위치를 조정 가능합니다. display는 none를 사용하여 처음에는 보이지 않다가, 스크롤을 내릴 때 위에 스크립트를 통해 보이게 되며, z-index는 숫자가 클수록 항상 위에 오게 되므로, 항상 위에 두겠다는 뜻입니다.
z-index의 경우 9가 마음에 들지 않으시면 숫자를 더 크게 쓰셔도 됩니다. 단, 최댓값이 존재하므로, 그 이하로 설정해주세요. 사파리 3이하의 버전에서는 16777271 이상을 인식하지 못하므로, 그 이하로 설정하시는게 좋겠습니다. (사실 9로 충분해요)
여기까지 하시고 적용을 하시면 오른쪽 하단에 탑 버튼이 생긴걸 보실 수 있습니다. 하지만 글씨는 뭔가 투박하고 별로죠. 그래서 이미지로 바꾸는 방법을 알아보도록 하겠습니다.
따라다니는 Top 버튼(이미지) 만들기
만약 나는 마우스 오버 시 이미지를 바꾸지 않겠다 하시는 분은 아래와 같이 사용하시면 됩니다.
<!--탑 버튼(이미지)&스크립트-->
<!--탑 버튼(이미지)-->
<img id="topBtn" src="이미지 경로" width=80 height=40 href="#">
<!--버튼 숨김/나타남 스크립트-->
<script>
$(function() {
$(window).scroll(function() {
if ($(this).scrollTop() > 200) {
$('#topBtn').fadeIn(); }
else { $('#topBtn').fadeOut(); }
});
$("#topBtn").click(function() {
$('html, body').animate({ scrollTop : 0 }, 300);
return false; });
});
</script>width와 height을 설정하지 않으면 이미지 원본 크기가 사용되며, 이미지 경로는 티스토리의 경우 './images/파일이름.확장자'가 됩니다. css파일의 경우 텍스트 방식과 같으므로, 위에 css를 복사하셔서 붙여 넣기 하시면 됩니다.
자 이제 마우스 오버 시 이미지를 바꾸실 분은 아래와 같이 사용하시면 됩니다.
<!--탑 버튼(이미지)&스크립트-->
<!--탑 버튼(이미지)-->
<img id="topBtn" src="기본 이미지"
onmouseover="this.src='마우스 오버 시 이미지'"
onmouseout="this.src='마우스 아웃 시 이미지'"
width=80 height=40 href="#">
<!--버튼 숨김/나타남 스크립트-->
<script>
$(function() {
$(window).scroll(function() {
if ($(this).scrollTop() > 200) {
$('#topBtn').fadeIn(); }
else { $('#topBtn').fadeOut(); }
});
$("#topBtn").click(function() {
$('html, body').animate({ scrollTop : 0 }, 300);
return false; });
});
</script>
저 src부분에 이미지 경로를 적어주셔야 하는데요. 위와 마찬가지로 css파일의 경우 티스토리의 경우 './images/파일이름.확장자'가 됩니다. 또, 마우스 아웃 시 이미지를 설정 안 해주시면 마우스 오버 후 이미지가 변경되고 마우스 아웃 시 기본 이미지로 돌아오지 않으므로, 꼭 넣어주세요. css는 마찬가지로 텍스트에 올린 css파일을 쓰시면 됩니다.
저의 경우엔 마지막 처럼 마우스 오버 시 그림을 바꿔주는 방식을 사용했는데, 자신이 편하신 방식대로 하시면 됩니다.
'PC > 정보' 카테고리의 다른 글
| [정보] 내가 가입한 사이트 확인/탈퇴하기 (0) | 2020.05.07 |
|---|---|
| [정보] 유튜브 동영상 반응형으로 올리기 (0) | 2020.05.05 |
| [정보] 티스토리 블로그 네이버, 구글 검색 노출 시키는 법 (0) | 2020.04.22 |
| [정보] windows.old 폴더 삭제하기 (0) | 2020.04.21 |
| [정보] PC 동영상 녹화 프로그램 추천 (oCam) (1) | 2020.04.20 |
댓글