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와 같은 속성을 변경할 수 있는 함수