[CSS/JQUERY] 메뉴 클릭 시, 페이지 내 해당 영역으로 이동

HTML

클릭할 메뉴

<div class="bodyReport-list">
    <ul>
        <li><a href="#bodyReport-bmi">나의 BMI 변화</a></li>
        <li><a href="#bodyReport-food">나의 음식 기록</a></li>
        <li><a href="#bodyReport-exercise">나의 운동 기록</a></li>
    </ul>
</div>

 

이동할 구역

<div class="bodyReport-content">
    <div class="bodyReport-content-detail" id="bodyReport-bmi">
    </div>
    <div class="bodyReport-content-detail" id="bodyReport-food">
    </div>
    <div class="bodyReport-content-detail" id="bodyReport-exercise">
    </div>
</div>

 

JQUERY

$(function () {
	$('li > a').click(function(){
    	$('html, body').animate({scrollTop: $(this.hash).offset().top}, 300);
    });
});

 

 

1.  $(this)는 현재 클릭된 <a> 요소를 나타냄.

<a> 요소가 클릭되었을 때, this.hash는 해당 <a> 요소의 href 속성 값에서 해시 부분을 가져온다,,~

 

2. 숫자 300은 스크롤 애니메이션의 지속 시간(duration)을 나타냄. 이 값은 밀리초 단위로 계산되며,

300 밀리초는 0.3초에 해당

 

[참고]

• 'li > a' 대신 .class명이나 #id명으로도 가능하다..!
• $(this.hash)보다 $(this).attr('href')가 더 명확
  • attr함수는 img 태그의 src나 a 태그의 href와 같은 속성을 변경할 수 있는 함수

---

 

결과