질문드립니다 ㅠ 채택완료
답변 4개
https://codepen.io/codribble/pen/RwOegRr
올려주신 코드펜을 가져와서 div 로 수정했습니다
답변에 대한 댓글 3개
수정해놨습니다. 코드펜 링크 다시 들어가보시면 될거에요
댓글을 작성하려면 로그인이 필요합니다.
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);
}
}
끝
상단에 남겨두신 코드펜에서 직접 테스트 해본 결과 문제 없었음요
댓글을 작성하려면 로그인이 필요합니다.
sinbi"a 태그 말고 div로 바꾸고 싶은데" ....이걸 자세히 설명해 놓으셔야 원하는 답변이 달릴 듯.
댓글을 작성하려면 로그인이 필요합니다.
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인
그런데,
main section 까지 스크롤을 내려야
nav ul li div 들을 클릭햇을때 이동이 작동하던데 ,
스크롤이 header에 있더라도
nav ul li div 를 클릭했을때 이동이 가능하게 하려면 어떻게 해야될까용~?