일하다보면 종종 사용하는 스크롤고정!!
매번 사용하지만 할 때마다 까먹는 것 같아서 정리한다
처음엔 스크롤 안에 함수가 아닌 if문을 직접 넣어서 사용했는데 새로고침을 할 경우 적용되지 않아서
함수로 만들어 스크롤상황과 최초접속(새로고침) 두가지 모두 적용되도록 만들었다
그리고 앵커태크 클릭 시 부드럽게 해당 영역으로 애니메이션 되는 것까지 함께 정리!
.hash가 아니라 클릭한 a태그의 href값을 읽어서 하는 방법도 있다
1 2 3 4 5 6 7 8 | $(document).on('click','#gnb a',function(event){ var targetHash = $(this).attr('href'); var headerHeight = $('header').outerHeight(); event.preventDefault(); $("html,body").animate({ scrollTop : $(targetHash).offset().top - headerHeight },300) }); | cs |
아래처럼 href 속성값을 읽어온다음 해당하는 섹션을 움직여준다
초보 퍼블리셔의 공부정리 블로그입니다.
내용에 오류가 있거나 수정사항이 있다면 꼭 댓글 부탁드립니다
'웹공부 > javascript , jQuery' 카테고리의 다른 글
Date 객체 (0) | 2019.08.31 |
---|---|
모바일 화면 방향 체크 (0) | 2018.07.22 |
레이어 팝업 n일만 보기 (0) | 2018.05.12 |