상단메뉴 스크롤 고정 / a태그 클릭시 해당 영역으로 스크롤

일하다보면 종종 사용하는 스크롤고정!!

매번 사용하지만 할 때마다 까먹는 것 같아서 정리한다

처음엔 스크롤 안에 함수가 아닌 if문을 직접 넣어서 사용했는데 새로고침을 할 경우 적용되지 않아서 

함수로 만들어 스크롤상황과 최초접속(새로고침) 두가지 모두 적용되도록 만들었다

그리고 앵커태크 클릭 시 부드럽게 해당 영역으로 애니메이션 되는 것까지 함께 정리!

.hash가 아니라 클릭한 a태그의 href값을 읽어서 하는 방법도 있다

  $(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)
  });

아래처럼 href 속성값을 읽어온다음 해당하는 섹션을 움직여준다

---

초보 퍼블리셔의 공부정리 블로그입니다.

내용에 오류가 있거나 수정사항이 있다면 꼭 댓글 부탁드립니다