[Tistory]21.Top 버튼 만들기

안녕하세요 유랑입니다.

오늘은 Top 버튼을 만들어 보도록 하겠습니다.

모바일 상에서 스크롤을 올리기 힘든점을 생각해서 넣어보겠습니다.

1. Top 버튼 만들기

요즘 웹툰 사이트나 사람들이 많이 접속하는 블로그에 가보시면 top버튼이 꼭 있을거에요.

내용이 많아질수록 상위로 가려면 꼭 필요한데요.

한 번 만들어 보겠습니다.

1-1) Top 버튼 업로드

홈페이지에 업로드 되어 있는 이미지를 가지고 오는 방법도 있겠지만,

저는 직접 버튼을 업로드 하여서 사용해 보도록 하겠습니다.

꾸미기 => 스킨편집 => html 편집을 통해서 파일 업로드로 가주세요.

이미지는 인터넷 상에서 무료로 제공되고 있는 이미지를 쓰시면 되겠습니다.

크기를 잘 확인하시고 업로드 해주세요^^

그리고 업로드 할때 이름을 top로 해주시기 바랍니다.

1-2) top 코드 작성

텍스트에 있는 코드를 복사하시고 html <head> ~ </head> 사이에 붙여넣기 해주세요.

코드 내용은 다음과 같습니다.

- $("#gotop").hide() => 탑이미지를 감춤

- (window).scroll(function() => 스크롤을 사용할 때

- if($(this).scrollTop() > 100){$("#gotop").fadeIn() => 스크롤이 100 픽셀만큼 내려오면 fade in

- display:none => 화면에서 안보이게 함

- position:fixed => 스크롤 위치에 상관없이 탑 이미지 위치 고정

- bottom:10px => 하단에서 10px 위에 위치

- right:10px => 오른쪽에서 10px 왼쪽에 위치

- z-index:99999999 => 탑 이미지를 최상단에 띄우기 위해 사용

코드를 적용하였으면 모바일과 데스크탑에서 top버튼을 확인할 수 있습니다^^

2. 마무리

오늘은 티스토리 블로그에 top 버튼을 넣어 보았습니다.

글이 점점 많아질수록 top 버튼의 중요성이 커지는데요.

앞으로도 좋은 기능을 찾도록 전진하겠습니다.

오늘도 고생하셨습니다.

감사합니다.

너랑나랑개발자이야기