질문드립니다 ㅠ
본문
답변 4
감사합니다!
그런데,
main section 까지 스크롤을 내려야
nav ul li div 들을 클릭햇을때 이동이 작동하던데 ,
스크롤이 header에 있더라도
nav ul li 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);
}
}
끝
상단에 남겨두신 코드펜에서 직접 테스트 해본 결과 문제 없었음요
제가 전에 썼던게 fullpage.js를 썼어요 이게 좋더라구요
"a 태그 말고 div로 바꾸고 싶은데" ....이걸 자세히 설명해 놓으셔야 원하는 답변이 달릴 듯.
