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
번호 분류 제목 글쓴이 날짜 조회 수
34 PlugIn 스크롤 따라 다니는 배너 file kay 2013.09.14 4517
33 PlugIn Tree 메뉴만들기 1 file kay 2013.08.14 5642
32 etc 자동 Submit 방지 및 Enter Key 체크하기 kay 2013.08.12 7822
31 PlugIn 자동 롤링 배너 Jquery 2 file kay 2013.08.07 13877
30 A to Z datepicker 달력 file kay 2013.08.05 6309
29 UI Jquery 갤러리 "jQuery-awesome-images-Gallery-lightbox" file kay 2013.07.30 4260
28 A to Z Javascript 강제 이벤트 실행시키기 "trigger" kay 2013.07.30 6041
» UI 스크롤 탑 컨트롤 - scrolltop control kay 2013.05.29 18965
26 A to Z CheckBox 값 읽어오기 kay 2013.05.06 25267
25 PlugIn Moodular - 회전,슬라이더, 터치 ,모자이크 kay 2013.05.04 5352
24 etc input hidden <-> text 변경하기 kay 2013.05.03 5952
23 etc 1.9x 버전 $.browser 삭제 대체 사용 2 kay 2013.04.26 5661
22 PlugIn sliding horizontal parallax - parallax 공부 샘플 kay 2013.04.17 6151
21 PlugIn jQuery Zoom - 이미지 줌 제어 ( 휠 , 클릭 , 오버 ) kay 2013.04.17 8421
20 PlugIn fancyBox - 레이어팝업 (추천) kay 2013.04.16 32407
19 PlugIn makisu - 메뉴 접기(?) kay 2013.04.16 18446
18 PlugIn poshytip - 툴팁 kay 2013.04.15 11803
17 PlugIn tiptip - 툴팁 kay 2013.04.14 17886
16 UI animate - 각종 애니메이션 효과 kay 2013.04.11 26329
15 PlugIn vGrid - 브라우저 너비에 따른 가변 그리드 1 kay 2013.04.08 6956
Board Pagination Prev 1 2 3 Next
/ 3