[javascript] a태그 선택시 특정위치로 부드럽게 가기

● href에 id를 지정하여 jquery의 animate함수와 offset()함수를 이용하여 그위치로 이동합니다.

● offset()함수는 범위를 지정할 때 자주 사용하는 함수입니다.(특정이름으로 지정, 아이디를 가진 요소의 위치값)

● this.hash를 사용하여 유효한 id값을 반환합니다.

​

● offset() 사용방법

// 상단을 기준으로 a엘리먼트 요소가 위치한 거리를 절대좌표로 반환
a.offset().top;

// 좌측을 기준으로 a엘리먼트 요소가 위치한 거리를 절대좌표로 반환
a.offset().left;

// 절대좌표를 기준으로 위에서 200px에 해당하는 좌표로 이동시킴
a.offset({top: 200});

// 절대좌표를 기준으로 좌측에서 200px에 해당하는 좌표로 이동시킴
a.offset({left: 200});

// 절대좌표를 기준으로 위에서 200px 그리고 좌측에서 200px에 해당하는 좌표로 이동시킴
a.offset({top: 200, left: 200});

● animate() 사용방법

$('이동할 요소').animate({이동방향: "이동값"}, 이동속도, 이동효과);

ex)
//절대좌표 top: 10px으로 이동 0.5초
a.animate({top: "10"}, 500);

//절대좌표 top: 10px으로 이동 빠르게또는 느리게
a.animate({top: "10"}, 'fast');
a.animate({top: "10"}, 'slow');

HTML

<nav>
    <ul>
      <li><a href="#sc1" target="_self" class="scroll">section1</a></li>
      <li><a href="#sc2" target="_self" class="scroll">section2</a></li>
      <li><a href="#sc3" target="_self" class="scroll">section3</a></li>
   </ul>
</nav>
<section id="sc1"></section>
<section id="sc2"></section>
<section id="sc3"></section>

Jquery

$(".scroll").click(function(event){
    //현재이벤트의 기본동작을 중단합니다,
    event.preventDefault();
    $('html,body').animate({scrollTop:$(this.hash).offset().top}, 300);
});