-
고정 헤더에 맞게 html 앵커 오프셋! 웹 공부 ! 2018. 3. 29. 16:28
고정 헤더에 맞게 html 앵커 오프셋 하는 방법
이렇게 이야기 하면 어렵게 느껴지지만 헤더가 고정일 경우 인 페이지 에서 앵커를 할 경우 헤더 페이지 만큼 컨텐츠가 잘려서 나오는 경우가 있다.
이미지로 보면 좀 더 이해 하기 편할 것이다.
이미지를 보면 컨텐츠가 잘려서 나온다.
이때 사용 할 수 있는 jquery코드가 있다.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
$(document).ready(function(){
$('a').click(function(){
var headerHeight = 100; //header 의 높이 만큼 조절 하면 됨
$('html, body').animate({
scrollTop: $( $.attr(this, 'href') ).offset().top - headerHeight
}, 500);
return false;
});
});
저 코드를 실행 하면 아래와 같이 결과물이 나온다.
'! 웹 공부 ! ' 카테고리의 다른 글
bootstrap (0) 2018.04.05 지정된 html파일 에만 css 주는 방법 (0) 2018.04.03 OwlCarousel2 슬라이더 사용 방법 (0) 2018.03.27 html 마우스 커서 이미지 변경 하기 (0) 2018.03.25 bx 슬라이더 사용 방법 (0) 2018.03.21