이용약관 스크롤
by hohoya33
HTML
<div id="content">
<!-- CONTENT -->
<div class="utilContents">
<div class="privacyNavi">
<h5>LG홈페이지 개인정보처리방침</h5>
<p class="text">LG 홈페이지는 고객님의 개인정보를 중요시하며, “정보통신망 이용촉진 및 정보보호”에 관한 법률을 준수하고 있습 니다. LG 홈페이지는 개인정보처리방침을 통하여 고객님께서 제공하시는 개인정보가 어떠한 용도와 방식으로 이용 되고 있으며, 개인정보보호를 위해 어떠한 조치가 취해지고 있는지 알려드립니다. LG 홈페이지의 개인정보처리방침은 다음과 같은 내용을 담고 있습니다.
<span>[본 방침은 2011년 9월 30일부터 시행됩니다.]</span>
</p>
<div class="list">
<ol class="cell1">
<li><span>01.</span> <a href="#current0">수집하는 개인정보 항목 및 수집방법</a></li>
<li><span>02.</span> <a href="#current1">개인정보의 수집 및 이용목적</a></li>
<li><span>03.</span> <a href="#current2">수집한 개인정보의 보유 및 이용기간</a></li>
<li><span>04.</span> <a href="#current3">개인정보의 파기절차 및 방법</a></li>
</ol>
<ol class="cell2">
<li><span>05.</span> <a href="#current4">수집한 개인정보의 공유 및 제공</a></li>
<li><span>06.</span> <a href="#current5">개인정보취급 위탁</a></li>
<li><span>07.</span> <a href="#current6">이용자 및 법정대리인의 권리와 그 행사방법</a></li>
<li><span>08.</span> <a href="#current7"> 개인정보 자동수집 장치의 설치, 운영 및 그 거부에 관한 사항</a></li>
</ol>
<ol class="cell3">
<li><span>09.</span> <a href="#current8">개인정보관리 책임자 또는 개인정보담당부서</a></li>
<li><span>10.</span> <a href="#current9">개인정보보호를 위한 기술 및 관리적 대책</a></li>
<li><span>11.</span> <a href="#current10"> 고지의 의무</a></li>
</ol>
</div>
</div>
<ol class="privacyView">
<li>
<strong id="current0">1. 수집하는 개인정보 항목 및 수집방법</strong>
<p>LG 홈페이지가 수집하는 개인정보는 아래와 같습니다.</p>
<p>- 수집항목 : 이메일, 이름, 휴대전화번호<br/>
- 개인정보 수집방법 : 홈페이지(온라인 고객문의)<br/>
- 다만, 서비스 이용과정에서 접속 로그나 쿠키, 접속 IP 정보가 수집 될 수 있습니다.</p>
</li>
<li>
<strong id="current1">2. 개인정보의 수집 및 이용목적</strong>
<p>LG 홈페이지는 수집한 개인정보를 다음의 목적을 위해 활용합니다.</p>
<p>- 문의 응대<br/> 사이트 이용 등에 대한 문의 응대</p>
</li>
<li>
<strong id="current2">3. 수집한 개인정보의 보유 및 이용기간</strong>
<p>LG 홈페이지는 개인정보 수집 및 이용목적이 달성된...
CSS
/* 유틸리티 - 개인정보처리방침 */
.privacyNavi{margin-top:31px;padding:20px;background:url(/images/utility/bg_privacy.gif) no-repeat;border-left:solid 1px #dcdcdc;border-right:solid 1px #dcdcdc;border-bottom:solid 1px #dcdcdc}
.privacyNavi h5{height:34px;;font-weight:bold;font-size:14px;color:#333;}
.privacyNavi .text{color:#333}
.privacyNavi .text span{display:block;padding-top:20px;height:40px}
.privacyNavi .list{overflow:hidden;*zoom:1;}
.privacyNavi .list ol{float:left;}
.privacyNavi .list ol li{font-size:12px}
.privacyNavi .list ol li a{color:#c40452}
.privacyNavi .list ol li a:hover{font-weight:bold;text-decoration:underline;letter-spacing:-0.1em}
.privacyNavi .list ol li span{color:#333}
.privacyNavi .list ol li span.on{font-weight:bold}
.privacyNavi .list ol.cell1{width:250px;}
.privacyNavi .list ol.cell2{width:350px;}
.privacyNavi .list ol.cell3{}
.privacyView{margin-top:50px;padding-bottom:100px}
.privacyView strong{display:block;margin-top:35px;height:38px;font-size:14px;font-weight:bold;color:#333}
.privacyView p{margin-bottom:12px}
.privacyView dt{height:24px}
.privacyView dt em{font-style:normal;font-weight:bold;color:#333}
.privacyView dd{margin-bottom:10px;padding-left:10px}
.privacyView span.color, .privacyView span a{color:#c40452}
.privacyView span a:hover{text-decoration:underline}
.privacyView p img{vertical-align:middle}
JavaScript
$(function(){
var obj = $(".list li a");
obj.hover(function(){$(this).parent().find("span").addClass('on');},function(){$(this).parent().find("span").removeClass('on');});
obj.click(function(){
var thisObj = $(this).attr("href");
$("body, html").stop().animate({scrollTop:$(thisObj).offset().top}, "slow");
});
});