[javascript] 팝업창 열고 지정 영역 제외 인쇄하기

영수증 팝업을 만들고 팝업 안에 프린트하기 버튼을 만든 후에, 버튼을 누르면 버튼을 제외한 영역이 인쇄되게끔 만드는 작업을 진행하였습니다.

필요한 화면은 총 두가지로,
영수증을 띄워야 하는 버튼이 있는 화면과
영수증과 프린트하기 버튼이 있는 화면이 필요합니다.

영수증을 띄워야 하는 버튼이 있는 화면부터 보겠습니다.
button 태그와 script를 만들어줍니다.

<button onclick="pop();">Pop</button>
<script type="text/javascript">
let POP;
function pop() {
POP = window.open('pri.html', 'thePopup', 'width=722,height=480')
};
</script>

그 다음 영수증과 프린트하기 버튼이 있는 화면을 만들어줍니다.

*HTML

<div id="wrap">
	<div class="order">[영 수 증]</div><br>
	<div class="container">
		<div class="info">
			[매 장 명] <br><br>
			<span class="adress">[주 소]</span><br><br>
		[대 표 자] 최종일 [TEL] <br><br>
		</div>
		============================
		<div class="info2">
			<ul class="title">
				<li>메 뉴 명</li>
				<li>단 가</li>
				<li>수 량</li>
				<li>금 액</li>
			</ul>
		</div>
		------------------------------------------------
		<div class="info2">
			<div class="pay">음식명</div>
			<ul class="orders">
				<li>000046</li>
				<li>9,900</li>
				<li>1</li>
				<li>9,900</li>
			</ul>
		</div>
		------------------------------------------------
		<div class="info2">합 계 금 액
			<div class="price">9,900</div>
		</div>
		------------------------------------------------
		<div class="info2">
			<ul class="vat">
				<li>부가세 과세물품가액</li>
				<li>부가세</li>
			</ul>
			<ul class="vat">
				<li>------</li>
				<li>------</li>
			</ul>
		</div>
		------------------------------------------------
		<div class="info2">받 을 금 액
			<div class="price">9,900</div>
		</div>
	</div>
	<button id="noprint" onclick="pops();">프린트하기</button>
</div>
<script>
function pops(){
	window.print();
	return false;
}
</script>

*CSS

html,body {
	margin:0px;
	padding:0px;
}
body, h1, h2, h3, h5, h6, li, p { 
	font-family: sans-serif, '맑은고딕', 'MalgunGothic' !important;
}
ul,li {
	margin:0px;
	padding:0px;
	list-style:none;
}
#wrap {
	margin:0 auto;
	text-align:center;
}
.container {
	overflow:hidden;
	margin:0 auto;
	width:220px;
	text-align:left;
	font-size:11px;
}
.order {
	padding-top:20px;
	font-weight:900;
	font-size:13px
}
.adress {
	letter-spacing:2.8px;
}
.info {
	margin-bottom:2px;
}
.info2 {
	line-height:2;
}
.info2:last-child {
	font-size:13px;
	font-weight:700
}
.pay {
	margin-bottom:-7px
}
.price {
	display:inline-block;
	float:right;
	padding-right:4px;
}
.title > li{
	display:inline-block;
	padding-right:25px;
}
.orders > li {
	display:inline-block;
	padding-right:23px;
}
.title > li:last-child, .orders > li:last-child {
	float:right;
	padding-right:4px;
}
.vat {
	display:inline-block;
	margin:3px 0px;
	line-height:1.5;
}
.vat:first-child {
	padding-left:30px;
}
.vat:last-child {
	float:right;
	padding-right:4px;
	text-align:right;
}
#noprint {
	margin-top:20px;
	padding:12px 20px;
	border:0px;
	background-color:#44a8ff;
	color:#fff;
	font-size:20px;
	font-weight:bold
}

여기까지 하면 전부 완료된 것처럼 보이겠지만 아직 하나가 더 남았습니다. 

영수증만 인쇄를 해야하는데 보시는 것처럼 화면에는 프린트하기 버튼이 남아있는 상태입니다. 

버튼을 제외하고 프린트가 되게끔 해야되는데요, 

해당 작업은 스크립트 작업이 아닌 css에서 추가 작업이 들어갑니다. 

코드는 아래와 같이 지정하면 해당 내용을 제외한 채로 인쇄가 가능하게 되죠.

@media print {
  #noprint { 
	display:none;
	}
}

[javascript] 모바일SMS 문자 보내기

해당 기능은 문자를 보내는 방법이라기보다는 사용자가 내가 지정한 번호와 문구로 문자를 보낼 수 있도록 
문자 화면으로 이동시켜주는 기능에 가깝습니다.

단순하게 공유하기 기능으로 작업하면 되겠다고 생각하고 작업을 했었는데,
세상의 모든 핸드폰은 안드로이드와 아이폰으로 나뉘어있다는 사실을 잠시 망각했었죠. (...)
내 폰(안드로이드)에서는 잘만 되는데 아이폰에서는 왜 그렇게 안 되던지.

보내는 기능에 앞서, 접속해오는 유저가 아이폰 유저인지 안드로이드 유저인지 확인부터 하는 작업을 거쳐야 합니다.

function checkMobile(){
	var varUA = navigator.userAgent.toLowerCase(); //userAgent 값 얻기
	if ( varUA.indexOf('android') > -1) {
		//안드로이드
		return "android";
	} else if ( varUA.indexOf("iphone") > -1||varUA.indexOf("ipad") > -1||varUA.indexOf("ipod") > -1 ) {
		//IOS
		return "ios";
	} else {
		//아이폰, 안드로이드 외
		return "other";
	}
}

해당 스크립트로 유저를 구분 짓는 것까지 완료되었다면 문자 보내는 기능부터 만들어야겠죠.
html 안에 class명이 btn이란 버튼이 있다 가정하고 아래 스크립트를 추가해줍니다.

const btn = document.querySelector('.btn');
btn.addEventListener('click', function() {
	checkM(checkMobile());
});

function checkM(m){
	location.href = 'sms:' +'전화번호'+(m == 'ios' ? '&' : '?') + 'body='+ encodeURIComponent("보낼 내용");
}

해당 스크립트를 적어주면 안드로이드에서도 아이폰에서도 사용되는 기능이 적용됩니다.

안드로이드와 아이폰이 location.href에서 각각 어떻게 다른지는 아래 내용에서 참고 부탁드립니다.

// 안드로이드
location.href = sms:받을번호?body=보낼메세지;

// 아이폰
location.href = sms:받을번호&body=보낼메세지;

* 참고 사이트 : https://justbobby.tistory.com/20 , https://justbobby.tistory.com/21

[javascript] 현재 시간 select로 잡기

시간을 select로 직접 선택할 수 있게끔 하는 방법도 있지만 select를 이미 현재 시간으로 선택 되게끔

설정하는 방법도 있습니다. 먼저 html에 해당 내용을 넣어주세요.

<select class="hour"></select>시
<select class="minute"></select>분
<script src="https://code.jquery.com/jquery-3.5.1.min.js"><script>

그리고 각 select에 들어갈 소스를 <script></script> 사이로 아래 내용을 넣어주세요.

 

var html = '';
for (var i = 0; i < 60; i++) {
  html += "<option value = '" + i + "' >" + i + "</option>";
}
$('.minute').append(html);

var htm = '';
for (var j = 0; j < 24; j++) {
  htm += "<option value = '" + j + "' >" + j + "</option>";
}
$('.hour').append(htm);

이렇게 하면 option값을 별도로 넣지 않아도 option 값이 자동으로 들어가는데요, 

여기에 이제 현재 시간을 자동적으로 선택할 수 있게끔 소스를 수정해줍니다. 

 

var html = '';
for (var i = 0; i < 60; i++) {
  html += "<option value = '" + i + "' >" + i + "</option>";
}
$('.minute').append(html);
var d = new Date();
var n = d.getMinutes();
$(".minute").val(n);

var htm = '';
for (var j = 0; j < 24; j++) {
  htm += "<option value = '" + j + "' >" + j + "</option>";
}
$('.hour').append(htm);
var dt = new Date();
var h = dt.getHours();
$(".hour").val(h);

$(".hour option").filter(function() {
    //may want to use $.trim in here
    return $(this).text() == h;
}).attr('selected', true);

$(".minute option").filter(function() {
    //may want to use $.trim in here
    return $(this).text() == n;
}).attr('selected', true);

위 소스를 넣고 화면에 구현해보면 현재 시간에 셀렉트가 맞게 들어가있는 것을 확인하실 수 있습니다. 

[javascript] input 이메일 유효성 체크 

이메일을 작성하는 input란에 내용을 넣을 때, 이메일이 형식에 맞게 작성되어있는 지 

확인할 수 있도록 input 아래에 에러 메세지를 넣어달라는 요청이 있었습니다. 

먼저 <head></head> 사이에 jquery 플러그인을 넣어주시고 

그 다음 html 안에 내용을 작성합니다.

<input type="email" placeholder="이메일" name="mail" id="mail" maxlength="30">
<div id="error_mail" class="result-email result-check"></div>

내용을 다 작성하였다면 다음은 javascript  차례인데요, 

</body> 전에 아래 스크립트를 작성합니다.

function email_check( email ) {    
    var regex=/([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/;
    return (email != '' && email != 'undefined' && regex.test(email)); 
}

$("input[type=email]").blur(function(){
  var email = $(this).val();
  if( email == '' || email == 'undefined') return;
  if(! email_check(email) ) {
  	$(".result-email").text('이메일 형식으로 적어주세요');
    $(this).focus();
    return false;
  }else {
	$(".result-email").text('');
  }
});

이렇게 내용을 작성하면 이메일 형식 (ex. test@test.com)이 아닐 경우에는

하단에 '이메일 형식으로 적어주세요' 라는 에러 메세지가 뜨게 됩니다.

[javascript] 자동롤링되는 실시간검색어 만들기

데이터를 입히기 전, 자동롤링이 되는 실시간 검색어를 만들어보려합니다. 

일반 포털사이트(네이버,다음,네이트)같은 실시간 검색어창이 아니라 심플하게 단순한 한줄자리로 만들어보았는데요. 

먼저 </head> 안에 제이쿼리 스크립트를 넣어주세요. 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>

그다음, <body>에 해당 예제 뼈대를 만들어주시구요.

	<div id="wrap">
		<div class="container">
			<ul id="best_search">
				<li><p>인기검색어</p></li>
				<li>
					<dl class="time1" style="display:">
						<dd><a class="t" href="#"><div class="num">1</div>자전거</a></dd>
						<dd><a class="t" href="#"><div class="num">2</div>전동킥보드</a></dd>
						<dd><a class="t" href="#"><div class="num">3</div>비키니</a></dd>
						<dd><a class="t" href="#"><div class="num">4</div>모노키니</a></dd>
						<dd><a class="t" href="#"><div class="num">5</div>원터치텐트</a></dd>
					</dl>
					<dl class="time2" style="display:none;">
						<dd><a class="t" href="#"><div class="num">6</div>등산화</a></dd>
						<dd><a class="t" href="#"><div class="num">7</div>풋살화</a></dd>
						<dd><a class="t" href="#"><div class="num">8</div>요가복</a></dd>
						<dd><a class="t" href="#"><div class="num">9</div>텐트</a></dd>
						<dd><a class="t" href="#"><div class="num">10</div>래쉬가드</a></dd>
					</dl>
					<dl class="time3" style="display:none;">
						<dd><a class="t" href="#"><div class="num">11</div>수영복</a></dd>
						<dd><a class="t" href="#"><div class="num">12</div>디스커버리반팔티</a></dd>
						<dd><a class="t" href="#"><div class="num">13</div>축구화</a></dd>
						<dd><a class="t" href="#"><div class="num">14</div>노스페이스바람막이</a></dd>
						<dd><a class="t" href="#"><div class="num">15</div>전기자전거</a></dd>
					</dl>
					<dl class="time4" style="display:none;">
						<dd><a class="t" href="#"><div class="num">16</div>캠핑카</a></dd>
						<dd><a class="t" href="#"><div class="num">17</div>캠핑테이블</a></dd>
						<dd><a class="t" href="#"><div class="num">18</div>여성골프웨어</a></dd>
						<dd><a class="t" href="#"><div class="num">19</div>여성래쉬가드</a></dd>
						<dd><a class="t" href="#"><div class="num">20</div>캠핑의자</a></dd>
					</dl>
				</li>
				<li>
					<a class="best_add ad1" style="cursor:pointer" onClick="javascript:view('0')">></a>
					<a class="best_add ad2" onClick="javascript:view('1')" style="display:none;cursor:pointer" >></a>
					<a class="best_add ad3" onClick="javascript:view('2')" style="display:none;cursor:pointer" >></a>
					<a class="best_add ad4" onClick="javascript:view('3')" style="display:none;cursor:pointer" ><</a>
				</li>
			</ul>
		</div>
   </div>
  

css로 디자인해주세요. <style></style>사이로 소스를 넣어주셔도 됩니다.

글꼴을 이쁘게 만들고 싶어서 나눔스퀘어 폰트를 넣었습니다만 취향에 따라 글꼴을 다르게 설정하셔도 됩니다.

@import url(https://cdn.rawgit.com/moonspam/NanumSquare/master/nanumsquare.css);
.normal     { font-weight: 400 }
.bold       { font-weight: 700 }
.bolder     { font-weight: 800 }
.light      { font-weight: 300 }

html,body {
	padding:0px;
	margin:0px;
	font-family: 'NanumSquare', sans-serif;
	position:relative;
}
#wrap {
	margin:0px;
	padding:0px;
	width:100%;
}
.container {
	width:1240px;
	margin:0 auto;
}
a,img {
	border:0px;
	text-decoration:none;
}
ul,li {
	list-style:none;
	padding:0px;
	margin:0px;
}
h1 {
	color:#525252;
	font-size:40px;
	font-weight:100;
	text-align:center;
	margin:0px;
	margin-top:193px;
}
h1 > b {
	font-weight:900;
}

#best_search {
	width:740px;
	margin:0 auto;
	padding-top:50px;
	text-align:center;
}
#best_search li,dd {
	display:inline-block;
	vertical-align:middle;
}
button {
	width:121px;
	background-color:#0085e2;
	color:#fff;
	border:0px;
	height:63px;
	margin-left:-5px;
	padding:0px;
	font-size:18px;
}
#best_search li p {
	color:#393939;
	font-size:17px;
	font-weight:bold;
	margin:0px;
	padding-right:30px;
}
dd {
	margin:0px;
}
dd  a.t{
	cursor:pointer;
	margin:0px;
	color:#4b4b4b;
	text-overflow:ellipsis;
	overflow:hidden;
	width:94px;
	white-space:nowrap;
	display:inline-block;
	font-size:17px;
	text-align:left;
	padding-right:13px;
	font-weight:700;
	vertical-align:middle;
}
dd .num {
	background-color:#4b4b4b;
	color:#fff;
	font-size:10px;
	margin-right:10px;
	vertical-align:middle;
	width:18px;
	height:18px;
	float:left;
	line-height:18px;
	text-align:center;
}
.best_add {
	border:1px solid #bebebe;
	color:#4b4b4b;
	padding:0px 4px;
	margin-left:10px;
}

마지막으로 <script></script> 사이로 스크립트를 넣어주시면 완성입니다.

function view(arg){
	$(".time1, .time2, .time3, .time4, .ad1, .ad2, .ad3, .ad4").css("display","none");
	if(arg=="0") {
		$(".time2, .ad2").css("display","block");
		viewcount = 1;
	}
	else if(arg=="1") {
		$(".time3, .ad3").css("display","block");
		viewcount = 2;
	}
	else if(arg=="2") {
		$(".time4, .ad4").css("display","block");
		viewcount = 3;
	}
	else if(arg=="3") {
		$(".time1, .ad1").css("display","block");
		viewcount = 0;
	}
}
var viewcount = 0;
var rtcarousel = setInterval(function(){ view(viewcount) },5000);

$("#best_search").mouseenter(function() {
	clearInterval(rtcarousel);
});

$("#best_search").mouseleave(function() {
	rtcarousel = setInterval(function(){ view(viewcount) },5000);
});

완성화면은 아래를 참고해주세요.

jsfiddle에 소스를 넣었더니 스크립트가 잘 먹히지 않아서 html 안으로 넣은 점 참고 부탁드립니다.

[javascript] on,off 스위치 만들기 (토글버튼: Togglebutton)

더웠던 휴가 다녀오고 바쁜 업무를 처리하다보니 시간만 흘러 어느새 8월말이 다다르고 있네요. 

휴가를 너무 푹 쉬고 왔는지 피곤함만 더 늘어가는 요즘입니다.

피곤함을 조금 더 빨리 떨치기 위해서 소홀했던 블로그도 챙길 겸 ON,OFF 스위치를 만드는 법을 가져왔습니다.

on,off 스위치 즉 토글버튼(Togglebutton)은 상태값을 on,off할때 유용한 버튼이죠. 

만들기 앞서서 먼저 <head> 안에 해당 소스를 넣어주세요.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>

다음 <html> 안에 해당 내용을 넣어주세요.

<label class="switch">
  <input type="checkbox">
  <span class="slider round"></span>
</label>
<p>OFF</p><p style="display:none;">ON</p>

<head> 안에 <style></style> 사이로 css를 넣어주세요.

/* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
  vertical-align:middle;
}

/* Hide default HTML checkbox */
.switch input {display:none;}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

p {
	margin:0px;
	display:inline-block;
	font-size:15px;
	font-weight:bold;
}

마지막으로 </body> 안의 <script></script> 사이로 해당 구문을 넣어주면 완성입니다.

var check = $("input[type='checkbox']");
check.click(function(){
	$("p").toggle();
});

참조 :  https://www.w3schools.com/howto/howto_css_switch.asp

[javascript] slideup 효과로 상단배너 숨기기

 홈페이지, 또는 랜딩페이지의 팝업, 배너 외에 맨 위의 상단배너가 눈에 띄일 때가 있습니다. 

클릭하면 배너가 위로 올라가 사라지는 듯한 효과가 구현되는데요, 

(가까운 예로 쿠팡 홈페이지가 있습니다. https://www.coupang.com/)

오늘은 제이쿼리 메소드인 slideup으로 위 상단 배너가 사라지는 효과를 만들어보려 합니다.

 예제가 무척 간단합니다.

 먼저, </head> 안에 제이쿼리 스크립트를 준비해주세요.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>

다음은 <style> 안에 아래 코드를 넣어주세요.

  html, body {margin:0px;padding:0px;}
  #bg1 {width:100%; height:85px; background-color:#003e76;}
  #bg2 {width:100%; height:800px; background-color:#3C87CA;}

마지막으로 아래 코드를 넣어주면 완성됩니다.

	<a href="#" onclick="$('#bg1').slideUp(400);">
		<div id="bg1"></div>
	</a>
	<div id="bg2"></div>

 위 예제를 완성하면 상단을 누를때 상단이 사라지는 효과를 볼 수 있습니다.

참고로 slideup안에 들어가는 숫자는 효과가 진행되는 시간을 설정하는 것인데요.

예를 들어 slideUp(400)은 0.4초, slideUp(4000)은 4초동안 효과가 적용되는 거로 생각하시면 되겠습니다.

[javascript] select box css 디자인

select box를 css로 디자인하는 부분은 생각보다 쉽지 않습니다. select는 어떻게든 디자인한다고 하지만

 option 부분과 select의 화살표까지 디자인을 생각하다보면 까다롭다고 느끼게 되기 마련인데요. 

 오늘은 select box를 보다 이쁘게 디자인할 수 있을 만한 방법을 알아보도록 하겠습니다.

이번 예제에서는 화살표 이미지가 필요합니다. 화살표 이미지를 만드시거나 아래에서 다운받아주세요. 

arrow.zip

</head> 안에 제이쿼리 스크립트를 넣어주신 후, html에  소스를 넣어주세요.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>

<div class="selectbox">
	<dl class="dropdown">
		<dt><a href="#" style="padding-top:4px;"><span>신상품순</span></a></dt>
		<dd>
			<ul class="dropdown2">
				<li><a href="#">신상품순</a></li>
				<li><a href="#">인기상품순</a></li>
				<li><a href="#">낮은가격순</a></li>
				<li><a href="#">높은가격순</a></li>
			</ul>
		</dd>
	</dl>
</div>

그 다음, css로 디자인을 꾸며줍니다.

.desc { color:#e8e8e8;}
.desc a {color:#515151;}
.dropdown {width:103px;margin:0px;}
.dropdown dd, .dropdown dt, .dropdown ul { margin:0px; padding:0px; }
.dropdown dd { position:relative; }
.dropdown a, .dropdown a:visited { color:#3b3b3b; text-decoration:none; outline:none;}
.dropdown a:hover { color:#3b3b3b;}
.dropdown dt a:hover { color:#3b3b3b; border: 1px solid #9e9e9e;}
.dropdown dt a {background:#fff url('화살표이미지') no-repeat scroll right center; display:block; padding-right:20px;
border:1px solid #9e9e9e; width:82px;height:33px;}
.dropdown dt a span {cursor:pointer; display:block;line-height:29px;padding-left:10px;}
.dropdown dd ul { background:#fff none repeat scroll 0 0; border:1px solid #9e9e9e; color:#515151; display:none;
left:0px; padding:5px 0px; position:absolute; top:-1px; width:auto; min-width:102px; list-style:none; text-align:left;}
.dropdown span.value { display:none;}
.dropdown dd ul li a { padding:5px; display:block;padding-left:11px;}
.dropdown dd ul li a:hover { background-color:#e8e8e8;}
.dropdown img.flag { border:none; vertical-align:middle;padding:11px;}
.flagvisibility { display:none;}

마지막으로 스크립트를 넣어주세요.

$(".dropdown img.flag").addClass("flagvisibility");

$(".dropdown dt a").click(function() {
$(".dropdown dd ul").toggle();
});
	
$(".dropdown dd ul li a").click(function() {
var text = $(this).html();
$(".dropdown dt a span").html(text);
$(".dropdown dd ul").hide();
/* $("#result").html("Selected value is: " + getSelectedValue("sample"));*/
});
	
function getSelectedValue(id) {
return $("#" + id).find("dt a span.value").html();
}

$(document).bind('click', function(e) {
var $clicked = $(e.target);
if (! $clicked.parents().hasClass("dropdown"))
$(".dropdown dd ul").hide();
});

$(".dropdown img.flag").toggleClass("flagvisibility");

참고 : http://jsfiddle.net/c2ezuw24/1/

[javascript] 플로팅배너 만들기

 제가 플로팅배너라는 개념을 처음 접했을 때, 전 스크롤이 긴 랜딩페이지나 홈페이지를 볼 때, 

오른쪽 하단이나 상단에 따라오는 배너를 '퀵배너'라고 알고 있었는데요. 

이것을 근래에 들어서야 퀵배너가 플로팅배너라고 불리는 것을 알게 되었습니다. 

오늘은 스크롤에 따라 따라오지만 계속 멈춰서있는 듯한 플로팅배너와 스크롤을 열심히 쫓아오는 듯한 플로팅 배너 

이렇게 두가지 버전을 만들어보려 합니다. 먼저 멈춰서있는 듯한 플로팅 배너부터 만들어보겠습니다.

</head> 안에 제이쿼리 스크립트를 넣어주세요.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>

html,body {margin:0; padding:0; position: relative; height: 100%;}
#wrap {margin:0 auto;text-align:center;}
#quick_bg {margin:0 auto;text-align:center;width:960px;position:relative;}
#quick {position:absolute;z-index:2;top:15px;width:153px;right:0px;}

마지막으로 플로팅배너를 넣으려고 하는 페이지의 <body> 아래로 해당 html를 ctrl+c, ctrl+v해서 넣어주세요. 

<div id="wrap">
	<div id="quick_bg">
		<div id="quick">
			<a href="#form" style="position:fixed;margin-top:-17px"><img src="img/플로팅배너이미지.png" style="width:250px"></a>
		</div>
	</div>
</div>

멈춰서있는 듯한 플로팅 배너 페이지가 완성되었습니다. 

다음은 스크롤을 열심히 쫓아오는 듯한 플로팅 배너를 만들어보겠습니다. 

똑같이 </head> 안에 제이쿼리 스크립트를 넣어주시고 CSS에 해당 소스를 넣어주세요. 

 body {margin:0;}
 #wrap {margin:0 auto;text-align:center;}
 #quick_bg {margin:0 auto;text-align:center;width:1130px;position:relative;}
 #quick {position:absolute;z-index:2;top:15px;width:153px;right:0px;}
 #container {position:relative;}

var quick_menu = $('#quick');
var quick_top = 470;

quick_menu.css('top', $(window).height() );
$(document).ready(function(){
quick_menu.animate( { "top": $(document).scrollTop() + quick_top +"px" }, 200 ); 
$(window).scroll(function(){
quick_menu.stop();
quick_menu.animate( { "top": $(document).scrollTop() + quick_top + "px" }, 500 );
});
});

 <div id="wrap">
	<div id="container">
		<div id="quick_bg">
			<div id="quick">
				<a href="#form"><img src="img/플로팅배너이미지.png"></a>
			</div>
		</div>
	</div>
</div>

[javascript] scroll top 위로가기 버튼

긴 페이지를 읽고 있을 때, 페이지의 오른쪽 하단에 위를 가리키는 화살표, 

또는 top이라고 적혀있는 버튼이 보일 때가 있습니다. 

이것을 누르면 맨 위부분으로 이동이 되는 것을 많이 보셨을 텐데요. 

이 위로가기 버튼, 즉 scroll top을 부드럽게 위로 이동하게 만드는 부분을 작업해보려합니다.

먼저 </head> 안에 제이쿼리 스크립트를 넣어주세요.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>

$(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;
		});
	});

});

body {
	font: .88em/150% Arial, Helvetica, sans-serif;
	margin: 30px auto;
}
h1 {
	font: bold 80%/120% Arial, Helvetica, sans-serif;
	text-transform: uppercase;
	margin: 0 0 10px;
	color: #999;
}
h2 {
	font-size: 2.5em;
	margin: 0 0 8px;
}
h3 {
	font-size: 1.6em;
	margin: 20px 0 5px;
}
a {
	color: #69C;
	text-decoration: none;
}
a:hover {
	color: #F30;
}
p {
	margin: 0 0 10px;
}
em {
	font: italic 100% "Times New Roman", Times, serif;
}
.credits {
	border-bottom: solid 1px #eee;
	padding-bottom: 10px;
	margin: 0 0 30px;
}
#pagewrap {
	margin: 0 auto;
	width: 600px;
	padding-left: 150px;
	position: relative;
}

/*
Back to top button 
*/
#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;
	/* background color 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;
	/* background color transition */
	-webkit-transition: 1s;
	-moz-transition: 1s;
	transition: 1s;
}
#back-top a:hover span {
	background-color: #777;
}

마지막으로 <body>에 id값을 top으로 주시고 예제를 안에 넣어주시면 끝이 납니다.

<div id="pagewrap">
	<h1>Demo</h1>
	<h2><a href="http://webdesignerwall.com/tutorials/animated-scroll-to-top">Animated Scroll to Top</a></h2>
	<p class="credits"><em>by <a href="http://webdesignerwall.com">Web Designer Wall</a></em></p>
	<p>↓ scroll down</p>
	<p>↓</p>
	<p>↓</p>
	<p>↓</p>
	<p>↓</p><p>↓</p>
	<p>In sollicitudin blandit cursus. Pellentesque ornare, augue ac posuere consectetur, tellus ligula feugiat lorem, id imperdiet tellus tortor ut urna. Ut eleifend rhoncus augue sit amet dignissim. In mattis lobortis imperdiet. Aliquam molestie nisi et purus mattis volutpat. Cras dignissim, arcu vel pretium interdum, turpis sapien rutrum felis, non condimentum nulla orci ornare tellus. In laoreet tristique mauris, in accumsan quam commodo ac. Nam fringilla sapien sed nibh vehicula at rutrum metus blandit. Mauris eleifend, velit eget lacinia ullamcorper, elit sapien malesuada orci, fringilla imperdiet enim ante at velit. Vestibulum posuere dictum sapien, id volutpat sapien auctor non. Fusce convallis elit sagittis augue venenatis tempor in eget ligula. Curabitur at diam leo, eu convallis purus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin molestie nunc massa. Quisque tempor neque in sem laoreet vel dictum magna commodo. In elementum, turpis sed bibendum sollicitudin, augue leo malesuada dolor, ut hendrerit lectus libero id purus.</p>
	<p>↓</p>
	<p>↓</p>
	<p>↓</p>
<h3><a href="http://themify.me">Themify.me</a></h3>
	<p>Mauris ornare rhoncus sem, non euismod tortor rhoncus ac. Aliquam erat volutpat. Fusce justo purus, convallis sed feugiat nec, aliquet et ipsum. Nullam dapibus semper risus eu accumsan. Nulla facilisis eros ac ligula sodales suscipit. Fusce pellentesque iaculis dignissim. Phasellus tristique neque vitae justo laoreet tempus. Duis dignissim mollis lectus, id mollis tortor dignissim ut. Proin non velit arcu, sit amet laoreet massa. Aliquam gravida eros sit amet leo scelerisque molestie. Morbi et cursus felis. Pellentesque at dui nunc. Integer euismod tincidunt nisl, in iaculis tellus feugiat sed. Praesent semper augue eu augue ullamcorper mattis.</p>
	<h3><a href="http://icondock.com">IconDock</a></h3>
	<p> Integer urna diam, viverra eu convallis at, luctus vel ipsum. Morbi varius eros neque, eu malesuada dolor. Etiam eget eleifend metus. Duis auctor orci et odio cursus adipiscing. Aliquam erat volutpat. In posuere faucibus justo, et faucibus lectus sodales ut. Vestibulum bibendum, dolor sed auctor rhoncus, massa nulla faucibus dui, in sollicitudin elit est at lorem. Proin aliquam gravida turpis et facilisis. Sed ornare enim et odio dictum dapibus ac vitae dolor. Duis sodales felis aliquet lectus commodo dictum. Etiam consectetur lacus sit amet lectus venenatis et iaculis urna ornare. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin erat leo, condimentum sit amet volutpat in, auctor nec urna. Curabitur felis ligula, gravida at dignissim ac, faucibus vel metus. Ut euismod nibh sit amet nibh blandit in posuere libero scelerisque. Donec quis augue nibh, eu facilisis metus. Donec cursus condimentum erat quis sollicitudin. Mauris enim tortor, hendrerit ut pharetra non, eleifend non elit. Ut dapibus eleifend ipsum a rhoncus. Aenean eu ante felis, nec vulputate enim.</p>
	<h3><a href="http://bestwebgallery.com">Best Web Gallery</a></h3>
	<p>Mauris ornare rhoncus sem, non euismod tortor rhoncus ac. Aliquam erat volutpat. Fusce justo purus, convallis sed feugiat nec, aliquet et ipsum. Nullam dapibus semper risus eu accumsan. Nulla facilisis eros ac ligula sodales suscipit. Fusce pellentesque iaculis dignissim. Phasellus tristique neque vitae justo laoreet tempus. Duis dignissim mollis lectus, id mollis tortor dignissim ut. Proin non velit arcu, sit amet laoreet massa. Aliquam gravida eros sit amet leo scelerisque molestie. Morbi et cursus felis. Pellentesque at dui nunc. Integer euismod tincidunt nisl, in iaculis tellus feugiat sed. Praesent semper augue eu augue ullamcorper mattis.</p>
	<h3><a href="http://ndesign-studio.com">N.Design Studio</a></h3>
	<p> Integer urna diam, viverra eu convallis at, luctus vel ipsum. Morbi varius eros neque, eu malesuada dolor. Etiam eget eleifend metus. Duis auctor orci et odio cursus adipiscing. Aliquam erat volutpat. In posuere faucibus justo, et faucibus lectus sodales ut. Vestibulum bibendum, dolor sed auctor rhoncus, massa nulla faucibus dui, in sollicitudin elit est at lorem. Proin aliquam gravida turpis et facilisis. </p>
	<p>Sed ornare enim et odio dictum dapibus ac vitae dolor. Duis sodales felis aliquet lectus commodo dictum. Etiam consectetur lacus sit amet lectus venenatis et iaculis urna ornare. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin erat leo, condimentum sit amet volutpat in, auctor nec urna. Curabitur felis ligula, gravida at dignissim ac, faucibus vel metus. Ut euismod nibh sit amet nibh blandit in posuere libero scelerisque. Donec quis augue nibh, eu facilisis metus. Donec cursus condimentum erat quis sollicitudin. Mauris enim tortor, hendrerit ut pharetra non, eleifend non elit. Ut dapibus eleifend ipsum a rhoncus. Aenean eu ante felis, nec vulputate enim.</p>
	<h3>Sub Heading 5</h3>
	<p>Mauris ornare rhoncus sem, non euismod tortor rhoncus ac. Aliquam erat volutpat. Fusce justo purus, convallis sed feugiat nec, aliquet et ipsum. Nullam dapibus semper risus eu accumsan. Nulla facilisis eros ac ligula sodales suscipit. Fusce pellentesque iaculis dignissim. Phasellus tristique neque vitae justo laoreet tempus. Duis dignissim mollis lectus, id mollis tortor dignissim ut. Proin non velit arcu, sit amet laoreet massa. Aliquam gravida eros sit amet leo scelerisque molestie. Morbi et cursus felis. Pellentesque at dui nunc. Integer euismod tincidunt nisl, in iaculis tellus feugiat sed. Praesent semper augue eu augue ullamcorper mattis.</p>
	<h3>Sub Header 6</h3>
	<p> Integer urna diam, viverra eu convallis at, luctus vel ipsum. Morbi varius eros neque, eu malesuada dolor. Etiam eget eleifend metus. Duis auctor orci et odio cursus adipiscing. Aliquam erat volutpat. In posuere faucibus justo, et faucibus lectus sodales ut. Vestibulum bibendum, dolor sed auctor rhoncus, massa nulla faucibus dui, in sollicitudin elit est at lorem. Proin aliquam gravida turpis et facilisis. </p>
	<p>Sed ornare enim et odio dictum dapibus ac vitae dolor. Duis sodales felis aliquet lectus commodo dictum. Etiam consectetur lacus sit amet lectus venenatis et iaculis urna ornare. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin erat leo, condimentum sit amet volutpat in, auctor nec urna. Curabitur felis ligula, gravida at dignissim ac, faucibus vel metus. Ut euismod nibh sit amet nibh blandit in posuere libero scelerisque. Donec quis augue nibh, eu facilisis metus. Donec cursus condimentum erat quis sollicitudin. Mauris enim tortor, hendrerit ut pharetra non, eleifend non elit. Ut dapibus eleifend ipsum a rhoncus. Aenean eu ante felis, nec vulputate enim.</p>
	<h3>Sub Heading 7</h3>
	<p>Mauris ornare rhoncus sem, non euismod tortor rhoncus ac. Aliquam erat volutpat. Fusce justo purus, convallis sed feugiat nec, aliquet et ipsum. Nullam dapibus semper risus eu accumsan. Nulla facilisis eros ac ligula sodales suscipit. Fusce pellentesque iaculis dignissim. Phasellus tristique neque vitae justo laoreet tempus. Duis dignissim mollis lectus, id mollis tortor dignissim ut. Proin non velit arcu, sit amet laoreet massa. Aliquam gravida eros sit amet leo scelerisque molestie. Morbi et cursus felis. Pellentesque at dui nunc. Integer euismod tincidunt nisl, in iaculis tellus feugiat sed. Praesent semper augue eu augue ullamcorper mattis.</p>
	<h3>Sub Header 8</h3>
	<p> Integer urna diam, viverra eu convallis at, luctus vel ipsum. Morbi varius eros neque, eu malesuada dolor. Etiam eget eleifend metus. Duis auctor orci et odio cursus adipiscing. Aliquam erat volutpat. In posuere faucibus justo, et faucibus lectus sodales ut. Vestibulum bibendum, dolor sed auctor rhoncus, massa nulla faucibus dui, in sollicitudin elit est at lorem. Proin aliquam gravida turpis et facilisis. </p>
	<p>Sed ornare enim et odio dictum dapibus ac vitae dolor. Duis sodales felis aliquet lectus commodo dictum. Etiam consectetur lacus sit amet lectus venenatis et iaculis urna ornare. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin erat leo, condimentum sit amet volutpat in, auctor nec urna. Curabitur felis ligula, gravida at dignissim ac, faucibus vel metus. Ut euismod nibh sit amet nibh blandit in posuere libero scelerisque. Donec quis augue nibh, eu facilisis metus. Donec cursus condimentum erat quis sollicitudin. Mauris enim tortor, hendrerit ut pharetra non, eleifend non elit. Ut dapibus eleifend ipsum a rhoncus. Aenean eu ante felis, nec vulputate enim.</p>
	<h3>Sub Header 9</h3>
	<p> Integer urna diam, viverra eu convallis at, luctus vel ipsum. Morbi varius eros neque, eu malesuada dolor. Etiam eget eleifend metus. Duis auctor orci et odio cursus adipiscing. Aliquam erat volutpat. In posuere faucibus justo, et faucibus lectus sodales ut. Vestibulum bibendum, dolor sed auctor rhoncus, massa nulla faucibus dui, in sollicitudin elit est at lorem. Proin aliquam gravida turpis et facilisis. </p>
	<p>Sed ornare enim et odio dictum dapibus ac vitae dolor. Duis sodales felis aliquet lectus commodo dictum. Etiam consectetur lacus sit amet lectus venenatis et iaculis urna ornare. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin erat leo, condimentum sit amet volutpat in, auctor nec urna. Curabitur felis ligula, gravida at dignissim ac, faucibus vel metus. Ut euismod nibh sit amet nibh blandit in posuere libero scelerisque. Donec quis augue nibh, eu facilisis metus. Donec cursus condimentum erat quis sollicitudin. Mauris enim tortor, hendrerit ut pharetra non, eleifend non elit. Ut dapibus eleifend ipsum a rhoncus. Aenean eu ante felis, nec vulputate enim.</p>
	<h3>Sub Heading 10</h3>
	<p>Mauris ornare rhoncus sem, non euismod tortor rhoncus ac. Aliquam erat volutpat. Fusce justo purus, convallis sed feugiat nec, aliquet et ipsum. Nullam dapibus semper risus eu accumsan. Nulla facilisis eros ac ligula sodales suscipit. Fusce pellentesque iaculis dignissim. Phasellus tristique neque vitae justo laoreet tempus. Duis dignissim mollis lectus, id mollis tortor dignissim ut. Proin non velit arcu, sit amet laoreet massa. Aliquam gravida eros sit amet leo scelerisque molestie. Morbi et cursus felis. Pellentesque at dui nunc. Integer euismod tincidunt nisl, in iaculis tellus feugiat sed. Praesent semper augue eu augue ullamcorper mattis.</p>

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

</div>

출처 : http://webdesignerwall.com/tutorials/animated-scroll-to-top

http://webdesignerwall.com/demo/scroll-to-top/scrolltotop.html (데모페이지)