scrollTop()을 이용한 페이지 상단으로 부드럽게 이동하기 happycgi

회원가입

출석체크

마이페이지

CGIMALL

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

홈 > JAVASCRIPT > javascript 소스창고 > JQuery > scrollTop()을 이용한 페이지 상단으로 부드럽게 이동하기 상세정보

클라우드태그

javascript

php

html

asp

mysql

CSS

mobile

jquery

image

slide

占쌨댐옙

메뉴

占쏙옙占쏙옙占쏙옙트

현재접속자 명

scrollTop()을 이용한 페이지 상단으로 부드럽게 이동하기

해피팀

네티즌

소스분류

JQuery

다운로드 횟수

55 회

간단설명

메뉴클릭시 페이지 상단으로 부드럽게 이동할수 있는 자료입니다

평가하기

.scrollTop() 을 이용하여 스크롤시 지정한 값까지 이동하면 상단으로란 버튼이 노출되고 클릭시
부드럽게 상단으로 이동하며 버튼이 사라지는 자료입니다.

버튼

.scroll {position: fixed; left: 50%;bottom: 50px;display: none;}

버튼을 하단 고정으로잡고 숨깁니다.

$( window ).scroll( function() {
   if($(this).scrollTop() > 400 ) {
  $('.scroll').fadeIn();
   }else{
  $( '.scroll' ).fadeOut();
   }
} );

지정한 값만큼 스크롤시 버튼이 보이고 아니면 사라집니다.

$('.scroll').click(function(){
   $('html, body').animate({ scrollTop : 0},400);
   return false;
});