Notice
Recent Posts
Recent Comments
Link
«   2024/03   »
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31
Archives
Today
Total
관리 메뉴

web sprit

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

스크립트/J-Query

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

커드만 2014. 12. 31. 14:39

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

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




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


*제이쿼리 부분

1
2
3
4
5
6
7
8
9
<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>
cs


*CSS 부분

1
2
3
4
5
.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;}
cs



*HTML 부분

1
2
3
4
5
6
7
8
<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>
cs


Comments