스크롤하면 상단으로 올라갈수 있는 버튼

예전에도 상단으로 올라가고 내려가고 하는 버튼이나 자바스크트에 대해서 몇번 글을 쓴적이 있습니다.
예전에 쓴글은 아래의 링크를 확인하시면 도움이 되실겁니다.

오늘은 jquery  plugin을 이용한 것인데요. 
평상시에는 안보이다가 스크롤을 아래로 하면 상단으로 올라갈 수 있는 버튼이 보입니다.
이걸 적용해 보는 방법을 알아보겠습니다.

이동버튼에 관한 글

블로그 상하단 이동하기(anchor,앵커)

상.하단 부드럽게 이동하기

위로 이동버튼 간단하게 삽입하기

이번에는 jQuery 코드가 들어간건데요. 평상시에는 안보이다가 스크롤을 아래로 하면 위로버튼이 생성이 됩니다.
현재 제 블로그 하단에 보면 아래와 같은 이미지가 보입니다.

 
이걸 클릭하면 부드럽게 상단으로 올라갑니다.
사용하는 방법을 알려드리겠습니다.
먼저 홈페이지를 알려드립니다.
홈페이지 => http://www.mattvarone.com/web-design/uitotop-jquery-plugin/
홈페이지에 보시면 다운로드가 있으니 다운로드 받아서 사용하셔도 되고요. 데모페이지도 참고해서 보세요. 
먼저 아래의 js 파일과 이미지 파일을 스킨 업로드를 통해 업로드해주세요.

jquery.ui.totop.js

 
그런다음 </head>위에 아래의 코드를 넣어주세요.
먼저 현재 블로그에 jQuery 를 사용해서 jQuery를 포함하고 있으면 jQuery 는 필요없구요, 만약 없으면 아래처럼 하는것이 좋습니다.
제가 파일을 누락해서 수정해서 올립니다.

<!-- jquery -->	
<script src="images/jquery-1.3.2.min.js" type="text/javascript"></script>
<!-- easing plugin ( optional ) -->
<script src="images/easing.js" type="text/javascript"></script>
<!-- UItoTop plugin -->
<script src="images/jquery.ui.totop.js" type="text/javascript"></script>	
<script type="text/javascript">
	$(document).ready(function() {	
		$().UItoTop({ easingType: 'easeOutQuart' });		
	});
</script>

그다음 스타일 설정에서 아래의 코드를 추가해주시면 됩니다.

#toTop {
	display:none;
	text-decoration:none;
	position:fixed;
	bottom:10px;
	right:10px;
	overflow:hidden;
	width:51px;
	height:51px;
	border:none;
	text-indent:-999px;
	background:url(images/ui.totop.png) no-repeat left top;
}
#toTopHover {
	background:url(images/ui.totop.png) no-repeat left -51px;
	width:51px;
	height:51px;
	display:block;
	overflow:hidden;
	float:left;
	opacity: 0;
	-moz-opacity: 0;
	filter:alpha(opacity=0);
}
#toTop:active, #toTop:focus {
	outline:none;
}

이것으로 모든것이 끝입니다.