My Name is Kay....

DIY , 먹방 , 개발 , 육아 , 여행 좋아합니다.
AdBlock 사용시 화면이 정상적으로 노출되지 않습니다.
포스팅 관련 문의 및 개발 문의는 Email : wkzkfmxksi@gmail.com

추가 포스팅이 이뤄지지 않는 블로그입니다. 문의는 wkzkfmxksi@gmail.com 으로 연락주세요.
kay
조회 수 18965 추천 수 0 댓글 0
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄

원본 Url : http://www.xpressengine.com/?mid=download&package_srl=21842038

Test Url : http://www.uhoon.co.kr/test/1183.html


스크롤이 내려가면 스크롤탑 컨트롤이 나타나서 클릭시 페이지 상단으로 올라갑니다..


<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>scrolltop control </title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<style type="text/css">
	h1 { font-size: 34px; line-height: 1.2; margin: 0.3em 0 10px; }
	#scrolltotop{position:fixed;bottom:0px;right:0px}#scrolltotop
	span{width:48px;height:48px;display:block;background:url("/test/1183/top.png") top no-repeat;margin:0px
	15px 10px 0;border-radius:3px;-webkit-transition:all 0.2s ease-out;-moz-transition:all 0.2s ease-out;-o-transition:all 0.2s ease-out;-ms-transition:all 0.2s ease-out;transition:all 0.2s ease-out}#scrolltotop a:hover
	span{background:url("/test/1183/top.png") bottom no-repeat}
</style>

<script type="text/javascript">
<!--
	jQuery(function($){
	$('#scrolltotop').hide();
	$(function () {
		$(window).scroll(function () {
			if ($(this).scrollTop() > 100) {
				$('#scrolltotop').fadeIn();
			} else {
				$('#scrolltotop').fadeOut();
			}
		});
		$('#scrolltotop a').click(function () {
			$('body,html').animate({
				scrollTop: 0
			}, 1000);
			return false;
		});
	});
});
//-->
</script>
</head>
<body>
<div id="scrolltotop" style="display: block;"><a href="#top"><span></span></a></div>
<div style="height:3200px;">a</div>
</body>
</html>


관련 게시글



?

List of Articles
번호 분류 제목 글쓴이 날짜 조회 수
54 UI woothemes FlexSlider - 슬라이더 file kay 2014.09.16 286168
53 PlugIn jQuery Plugin For Auto Resizing iFrame - iFrame Resizer file kay 2014.03.10 105353
52 UI SelectBox Option 값 초기화 및 수정 삭제 kay 2013.03.02 36655
51 PlugIn fancyBox - 레이어팝업 (추천) kay 2013.04.16 32407
50 etc 에러 리포팅 , Ajax 디버깅 ( JS , ASP ) - 오류메시지 확인하기 kay 2013.03.08 30612
49 UI animate - 각종 애니메이션 효과 kay 2013.04.11 26329
48 A to Z CheckBox 값 읽어오기 kay 2013.05.06 25267
47 etc Table에 동적 Tr 추가/삭제 하기 kay 2014.02.09 21271
46 PlugIn jquery-syaku.rolling 상하좌우 롤링 ( 자동롤링 , 버튼 ) 10 file kay 2014.02.09 20152
» UI 스크롤 탑 컨트롤 - scrolltop control kay 2013.05.29 18965
44 PlugIn makisu - 메뉴 접기(?) kay 2013.04.16 18446
43 PlugIn tiptip - 툴팁 kay 2013.04.14 17886
42 PlugIn jQuery Org Chart - 조직도 그리기 file kay 2014.09.01 16605
41 PlugIn 자동 롤링 배너 Jquery 2 file kay 2013.08.07 13877
40 PlugIn Star Rating Plugin - jQuery 별점 주기 2 file kay 2014.05.01 13219
39 PlugIn Smooth Scroll - 스크롤 이동 ( 속도 , 위치 ) 2 file kay 2013.04.06 12676
38 PlugIn poshytip - 툴팁 kay 2013.04.15 11803
37 UI 동적으로 추가된 객체에 datepicker() 적용하기 kay 2013.11.06 10120
36 etc 한글/영어 byte 체크해서 자르기 1 kay 2013.11.30 9702
35 UI select Box option ( 초기화,추가,삭제 ) kay 2013.04.03 9529
Board Pagination Prev 1 2 3 Next
/ 3