scrollTop 관련 스크립트 작동이 이상해요 채택완료
김태후니
2년 전
조회 2,417
</p>
<p><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></p>
<p><div class="project_main_wrap w_50 progress_part"></p>
<p> <div id="part_1" class="report_contents_wrap">
<h4>기능 테스트 진행 상세내용</h4>
</div></p>
<p></div></p>
<p><script>
$(function() {</p>
<p> $(".test_part_tab li a").click(function(event) {
event.preventDefault();
$('.progress_part').animate({
scrollTop: $(this.hash).position().top //position
}, 500);
});
});
</script></p>
<p>
스크롤이 브라우저 상단에 붙는게 아니라
html 내의 특정 div(.progress_part)의 상단에 붙도록 하고 싶어요.
.progress_part는 oveflow:auto인 상태라서 내용이 많아질수록 스크롤이 생깁니다.
그래서 서치해보니 .position().top 이렇게 하면 해당 부모요소 기준으로 붙는다는건 알아냈는데
버튼을 클릭해보면 이상하게 움직이네요.
이리저리 왔다갔다 희안하게 움직입니다.
스크립트를 잘못 짠 것일까요?
댓글을 작성하려면 로그인이 필요합니다.
답변 1개
채택된 답변
+20 포인트
2년 전
</p>
<p><style>
.test_part_tab {
position: fixed;
right: 0;
}</p>
<p>.progress_part {
overflow: auto;
}</p>
<p>.report_contents_wrap {
height: 20em;
}</p>
<p>.gap {
height: 1000px;
}
</style></p>
<p><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></p>
<p><div class="gap"></div></p>
<p><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></p>
<p><div class="gap"></div></p>
<p><script src="<a href="http://code.jquery.com/jquery-latest.min.js"></script>" target="_blank" rel="noopener noreferrer">http://code.jquery.com/jquery-latest.min.js"></script></a>
<script>
$(function() {
$(".test_part_tab li a").click(function(event) {
event.preventDefault();
// $('.progress_part').animate({
// scrollTop: $(this.hash).position().top //position
// }, 500);</p>
<p> $('body').animate({
scrollTop: $(this.hash).position().top
});
});
});
</script></p>
<p>
로그인 후 평가할 수 있습니다
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인