[소스] a 태그를 클릭하여 해당 ID로 작동 이동하는 소스
2021.12.02
북마크 작성자 정보
작성일/수정일
2021-12-02 12:27:38 / 2021-12-02 12:27:38
http://relation.co.kr/images_board/board_system_publishing/171/index.php
<a href="ID"> 를 클릭하여 해당 <div id="ID">로 animation 하는 소스
SCRIPT
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(document).ready(function(){
$('.nav > a').on("click", function(e){
e.preventDefault();
var $this = $(this);
var nav_name = $this.attr('href').split('#');
var nav_name = nav_name[1];
//console.log(nav_name);
$('html, body').animate( {scrollTop:$("#"+nav_name).offset().top},500);
});
});
</script>
CSS
<style>
.wrap { display:block; width:100%; }
.nav { display:block; transform:translate(0,-50%); position:fixed; top:50%; right:20px; width:25px; height:126px; text-align:center; background-color:#ccc; border-radius:13px; }
.nav a { display:block; width:15px; height:15px; border-radius:7px; background-color:#fff; margin:5px 0 10px 5px; }
.step01 { display:block; width:100%; height:800px; background-color:#ececec; }
.step02 { display:block; width:100%; height:800px; background-color:#fff; }
.step03 { display:block; width:100%; height:800px; background-color:#ececec; }
.step04 { display:block; width:100%; height:800px; background-color:#fff; }
.step05 { display:block; width:100%; height:800px; background-color:#ececec; }
.footer { display:block; width:100%; height:300px; background-color:#333333; }
</style>
HTML
<body>
<div class="wrap">
<div class="nav">
<a href="#step01"></a>
<a href="#step02"></a>
<a href="#step03"></a>
<a href="#step04"></a>
<a href="#step05"></a>
</div>
<div class="step01" id="step01">step01</div>
<div class="step02" id="step02">step02</div>
<div class="step03" id="step03">step03</div>
<div class="step04" id="step04">step04</div>
<div class="step05" id="step05">step05</div>
<div class="footer">footer</div>
</div>
</body>