scrollTop 관련 스크립트 작동이 이상해요
본문
<ul class="test_part_tab after">
<li><a href="#part_1">기능</a></li>
<li><a href="#part_2">로컬</a></li>
<li><a href="#part_3">호환성</a></li>
<li><a href="#part_4">검수/피처드</a></li>
<li><a href="#part_5">로딩시간</a></li>
<li><a href="#part_6">발열</a></li>
</ul>
<div class="project_main_wrap w_50 progress_part">
<div id="part_1" class="report_contents_wrap">
<h4>기능 테스트 진행 상세내용</h4>
</div>
</div>
<script>
$(function() {
$(".test_part_tab li a").click(function(event) {
event.preventDefault();
$('.progress_part').animate({
scrollTop: $(this.hash).position().top //position
}, 500);
});
});
</script>
스크롤이 브라우저 상단에 붙는게 아니라
html 내의 특정 div(.progress_part)의 상단에 붙도록 하고 싶어요.
.progress_part는 oveflow:auto인 상태라서 내용이 많아질수록 스크롤이 생깁니다.
그래서 서치해보니 .position().top 이렇게 하면 해당 부모요소 기준으로 붙는다는건 알아냈는데
버튼을 클릭해보면 이상하게 움직이네요.
이리저리 왔다갔다 희안하게 움직입니다.
스크립트를 잘못 짠 것일까요?
답변 1
<style>
.test_part_tab {
position: fixed;
right: 0;
}
.progress_part {
overflow: auto;
}
.report_contents_wrap {
height: 20em;
}
.gap {
height: 1000px;
}
</style>
<ul class="test_part_tab after">
<li><a href="#part_1">기능</a></li>
<li><a href="#part_2">로컬</a></li>
<li><a href="#part_3">호환성</a></li>
<li><a href="#part_4">검수/피처드</a></li>
<li><a href="#part_5">로딩시간</a></li>
<li><a href="#part_6">발열</a></li>
</ul>
<div class="gap"></div>
<div class="project_main_wrap w_50 progress_part">
<div id="part_1" class="report_contents_wrap">
<h4>기능 테스트 진행 상세내용</h4>
</div>
<div id="part_2" class="report_contents_wrap">
<h4>로컬</h4>
</div>
<div id="part_3" class="report_contents_wrap">
<h4>호환성</h4>
</div>
<div id="part_4" class="report_contents_wrap">
<h4>검수/피처드</h4>
</div>
<div id="part_5" class="report_contents_wrap">
<h4>로딩시간</h4>
</div>
<div id="part_6" class="report_contents_wrap">
<h4>발열</h4>
</div>
</div>
<div class="gap"></div>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(function() {
$(".test_part_tab li a").click(function(event) {
event.preventDefault();
// $('.progress_part').animate({
// scrollTop: $(this.hash).position().top //position
// }, 500);
$('body').animate({
scrollTop: $(this.hash).position().top
});
});
});
</script>
답변을 작성하시기 전에 로그인 해주세요.
