답변 4개 / 댓글 3개
https://codepen.io/codribble/pen/RwOegRr
올려주신 코드펜을 가져와서 div 로 수정했습니다
html 수정 영역
우선 스크립트 추가
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
첫번째 변경
<li><a href="#section-1">Section 1</a></li>
를
<li><div class="section_tab" data-anchor="section-1">Section 1</div></li>
이러게
css 수정영역
nav ul li div {
display: block;
padding: 0.5rem 1rem;
color: white;
text-decoration: none;
cursor:pointer;
}
nav ul li div.current {
background: black;
}
추가
js 추가 영역
$('.section_tab').click(function(){
var anchorid = $(this).attr('data-anchor');
scroll_to_anchor_tab(anchorid);
});
function scroll_to_anchor_tab(anchor_id,speed) {
if( !speed ) var speed = 0;
var a_tag = $("#"+anchor_id);
if(a_tag.length > 0){
$('html, body').animate({
scrollTop: a_tag.offset().top - $('').height() - $('').height()
}, speed);
}
}
끝
상단에 남겨두신 코드펜에서 직접 테스트 해본 결과 문제 없었음요
답변을 작성하려면 로그인이 필요합니다.
그런데,
main section 까지 스크롤을 내려야
nav ul li div 들을 클릭햇을때 이동이 작동하던데 ,
스크롤이 header에 있더라도
nav ul li div 를 클릭했을때 이동이 가능하게 하려면 어떻게 해야될까용~?