[jquery] scrolltop 이동 이벤트

메뉴에 있는 버튼을 누르면 해당 세션으로 이동하는 이벤트

간단하게

<header>
  <ul>
    <li>
      <a href="#sec01">

<section id="sec01">

 

이렇게 작업했는데,

메뉴쪽을 position:fixed로 위에 고정시켜놔서

메뉴에 세션 상단이 가려져서 수정해달라는 요청을 받았당.

​

그래서 귀찮지만

a태그는 button으로 바꿔주고

jquery 코드를 추가했다.

 

var header;
header = $("header").height();

    $("header li button").click(function () {
        $("html, body").animate({
            scrollTop: $(".section_05").offset().top - header
        }, 200);
    });

$(window).resize(function(){
    header = $("header").height();
});

반응형이어서 리사이징때마다 header의 height값을 구한 뒤

이동해야하는 세션의 top 만큼에서 header의 height값을 빼서 위로 올림.

​

오류가 자꾸 떠서 왜일까 했는데

바보처럼 var header = $("header").height(); 이래놓고

리사이즈 function 안에다가도 var header = $("header").height(); 또 넣었음 ㅜㅜ 개바보

아무튼

var header;

header = $("header").height();

로 수정 후 실행하니 리사이징때마다 깔끔하게 이동한다.