조회 수 10414 추천 수 0 댓글 0
?

단축키

Prev이전 문서

Next다음 문서

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

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄
$(document).ready(function(){

	// hide #back-top first
	$("#back-top").hide();
	
	// fade in #back-top
	$(function () {
		$(window).scroll(function () {
			if ($(this).scrollTop() > 100) {
				$('#back-top').fadeIn();
			} else {
				$('#back-top').fadeOut();
			}
		});

		// scroll body to 0px on click
		$('#back-top a').click(function () {
			$('body,html').animate({
				scrollTop: 0
			}, 800);
			return false;
		});
	});
});


#back-top {
	position: fixed;
	bottom: 30px;
	margin-left: -150px;
}

#back-top a {
	width: 108px;
	display: block;
	text-align: center;
	font: 11px/100% Arial, Helvetica, sans-serif;
	text-transform: uppercase;
	text-decoration: none;
	color: #bbb;

	/* transition */
	-webkit-transition: 1s;
	-moz-transition: 1s;
	transition: 1s;
}
#back-top a:hover {
	color: #000;
}

/* arrow icon (span tag) */
#back-top span {
	width: 108px;
	height: 108px;
	display: block;
	margin-bottom: 7px;
	background: #ddd url(up-arrow.png) no-repeat center center;

	/* rounded corners */
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	border-radius: 15px;

	/* transition */
	-webkit-transition: 1s;
	-moz-transition: 1s;
	transition: 1s;
}
#back-top a:hover span {
	background-color: #777;
}


<p id="back-top">
<a href="#top"><span>          </span>Back To Top</a>
</p>


Scroll to Top을 구현할 수 있는 기본적인 소스 정보. jQuery 로드가 필요.

허세를 위해 흔해빠진 제이쿼리를 줏어쓴다



List of Articles
번호 분류 제목 글쓴이 날짜 조회 수
61 Zabbix Zabbix 아이템의 패시브와 액티브의 이해 JONG 2017.03.22 2230
60 Zabbix Zabbix 3.0에서 3.2로 업데이트하기 JONG 2016.10.03 2961
59 XpressEngine Rhymix에서 설치 화면이 나오지 않을 때 (CentOS7) 1 JONG 2016.03.25 3549
58 Zabbix CentOS7에 Zabbix 3.0.1 설치하기 JONG 2016.03.12 7491
57 Zabbix Zabbix의 각 프로세스가 하는 일 file JONG 2016.03.10 6670
56 Web 윈10에서 spartan이 localhost를 씹을때 JONG 2015.06.04 3869
55 Web animate의 속도를 빠르게 해주시는 Velocity.js 소개 1 file JONG 2014.08.27 7810
54 Web jQuery를 이용한 테이블 셀병합 JONG 2013.11.01 18721
53 XpressEngine XE 1.5.4.2 BlogAPI 안되는거 수정하는 코드 2 JONG 2013.10.29 7819
52 Web Youtube 동영상 자동재생으로 퍼담기 & 파라메터 JONG 2013.03.19 11625
51 XpressEngine XE 1.5.4.2 추천 & 비추천 기능을 비회원도 사용가능하게 하기 1 file JONG 2013.03.06 10741
50 Web 문서의 앵커 이동을 Smooth하게 스크롤 해주는 jQuery의 animate함수 사용법 JONG 2012.12.26 18620
49 Web Google Maps API v3에서 기본 infowindow 정보 없애기 (poi) JONG 2012.12.26 11124
48 Web 셀렉트 태그 관련 jQuery코드 정리 1 JONG 2012.11.17 10201
» Web 화면 최상단으로 움직이는 JS 소스 JONG 2012.10.15 10414
46 XpressEngine XE 모바일에서 유투브 동영상크기 고정하기 3 JONG 2012.09.07 10768
45 Web jQuery와 다른 라이브러리 (prototype 등) 를 함께 쓰는 방법 file JONG 2012.09.02 9724
44 Database MSSQL 스키마 비교 프로그램 Open DBDiff file JONG 2012.08.15 15198
43 XpressEngine Social XE 로그인을 모바일 레이아웃에 추가 file JONG 2012.08.15 9995
42 Web .htaccess 작성을 통한 이미지 펌 방지 file JONG 2012.05.04 13016
Board Pagination Prev 1 2 3 4 Next
/ 4