앵커 이동 제이쿼리(JQuery) - 높이값 받아오기

상단메뉴나 퀵메뉴를 눌럿을때 앵커설정으로 인해서 앵커의 아이디 값으로 이동하는것을 경험해 보았을 것이다.

단순히 앵커의 기능으로 갑자기 정적으로 위치이동 보다는 앵커를 눌럿을때 동적으로 보다 부드럽게 이동하는 제이쿼리를 소개하려 한다.

앵커이동 제이쿼리 - 앵커.html

*제이쿼리 부분

<script type="text/javascript">
$(document).ready(function($) {
  
    $(".start_zone a").click(function(event){    
        event.preventDefault();
        $('html,body').animate({scrollTop:$(this.hash).offset().top}, 500);
    });
});
</script>

*CSS 부분

.red{height:1000px; background:red;}                        
.blue{height:1000px; background:blue;}
.yellow{height:1000px; background:yellow;}
.start_zone{background:#e7e7e7;}
.start_zone a{font-size:20px; color:#666; font-weight:bold;}

*HTML 부분

<div class="start_zone">
    <a href="#red_box">빨간 박스</a>
    <a href="#blue_box">파란 박스</a>
    <a href="#yellow_box">노란 박스</a>
</div>
<div id="red_box" class="red"></div>
<div id="blue_box" class="blue"></div>
<div id="yellow_box" class="yellow"></div>