스크롤하면 부드럽게상단으로 이동하는 제이쿼리 happycgi

회원가입

출석체크

마이페이지

CGIMALL

jquery , CSS , PHP , Javascript , 무료폰트 , ASP

홈 > JAVASCRIPT > javascript 소스창고 > JQuery > 스크롤하면 부드럽게상단으로 이동하는 제이쿼리 상세정보

클라우드태그

Javascript

PHP

css

HTML

asp

API

jquery

mysql

image

Mobile

slide

게시판

메뉴

현재접속자 28명

스크롤하면 부드럽게상단으로 이동하는 제이쿼리

해피팀

네티즌

소스분류

JQuery

다운로드 횟수

634 회

간단설명

jquery plugin 을 이용하여 스크롤을 아래로 내리면 버튼이 나타나고, 버튼을 누르면 상단으로 부드럽게 이동하는 액션을 표현할 수 있습니다.

평가하기

jquery plugin 을 이용하여 스크롤을 아래로 내리면
버튼이 나타나고, 버튼을 누르면 상단으로 부드럽게
이동하는 액션을 표현할 수 있습니다.

홈페이지나 첨부된 js 파일을 업로드한뒤 </head>위에


<script src="images/jquery-1.3.2.min.js" type="text/javascript"></script>

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

<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;
}

위 코드만 넣어주면 간단하게 표현 할 수 있습니다.