답변 4개 / 댓글 3개
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로 바꾸고 싶은데" ....이걸 자세히 설명해 놓으셔야 원하는 답변이 달릴 듯.
비버팩토리제가 전에 썼던게 fullpage.js를 썼어요 이게 좋더라구요
답변을 작성하려면 로그인이 필요합니다.
그런데,
main section 까지 스크롤을 내려야
nav ul li div 들을 클릭햇을때 이동이 작동하던데 ,
스크롤이 header에 있더라도
nav ul li div 를 클릭했을때 이동이 가능하게 하려면 어떻게 해야될까용~?