jquery animation으로 해당 위치까지 부드럽게 이동하기

퍼블리싱을 하다보면 해당위치까지 스크롤이 자연스럽게 되는 효과를 넣고싶을때가 있다.

 

최근에는 홈페이지들이 풀페이지나 세로로 긴 형태가 많이 나타나서 더욱더 그런거같다.

 

그때마다 사용하는 방법이라 정리해두겠다.

 

$("selector").click(function (e) {
  e.preventDefault();
  var scrollPosition =  $($(this).attr("href")).offset().top;
  $("html, body").stop().animate({
        scrollTop: scrollPosition
  }, 700);
});

 

일단 특정 엘리먼트를 클릭하게됬을때 해당 attr값을 가지고 이동하게 처리해두었다.

 

위에서 부터 보면 e.preventDefault를 이용해서 불필요한 이벤트를 방지한다.

후에 해당 위치의 href값을 통해서 높이를 구한후에

마지막으로 jquery animate를 통해 body의 위치를 부드럽게 이동한다 ...

 

한번 만들어두면 꽤 유용하게 사용한다.