TOP 버튼 웹 스크롤링 이동 부드럽게 만들기

728x90

TOP 이동 버튼 만들기

티스토리 블로그 하단에서 상단으로 부드럽게 이동할 수 있는 스크립트입니다. 많은 블로그 및 웹사이트에서 사용하고 있습니다. 자신의 개성 있는 버튼을 만들어보시기 바랍니다. 일단 간단하게 기본스타일로 만들어 보겠습니다.

Top 버튼으로 사용할 이미지를 준비합니다.

이미지를 준비하셨다면 아래 스크롤링 스크립트를 다운로드합니다. 그럼 모든 준비는 마쳤습니다.

다운로드

scrolling.zip

0.00MB

JAVASCRIPT

<script src="./images/scrolling.js"></script>

다운로드한 스크립트를 자신의 스킨에 업로드합니다. 업로드한 후 위 스크립트 코드를 /head 사이에 입력합니다.

HTML

html코드는 버튼의 이미지를 티스토리 블로그에 표시하는 것입니다.

<div class="btn_top"><a onclick="go_top();"><img src="./images/btn_top.png"></a></div>

html 코드는 /body 바로 하단 적당한 위치에 입력합니다. 자신의 스킨에 맞도록 확인하면서 작업하는 것을 추천합니다.

CSS

css코드는 버튼의 위치와 크기를 지정하는 것입니다.

.btn_top{
cursor:pointer; margin:0; padding:0; 
display:block; position:fixed; right:25px; // 오른쪽에서 25px 떨어지게... 
bottom:20px; z-index:9999; // 제일 하단에서 20px 떨어지게...
}

이제 CSS를 통해 자신의 스킨에 맞도록 디자인을 합니다. 위치 설정과 수치를 변경하면서 마무리하시면 되겠습니다. 오늘도 작은 성공을 경험하시기 바랍니다.