jQuery를 사용하여 앵커 링크 클릭 시 부드럽게 스크롤되도록 하기

앵커(anchor) 링크로 페이지 내에서 스크롤하도록 링크를 만든 경우, 링크를 클릭할 때 부드럽게 스크롤되도록 하려면 다음과 같은 jQuery 스크립트를 사용할 수 있습니다.

$('a').click(function(){
$('html, body').animate({
scrollTop: $( $.attr(this, 'href') ).offset().top
}, 500);
return false;
});
// Source: stackoverflow

특정 요소(element)에 국한시키려면 $('a') 부분에 해당 요소를 추가하면 됩니다. 위의 코드를 그대로 사용했을 때 일부 js 코드와 충돌이 일어나는지 일부 링크가 제대로 작동하지 않아서 요소를 특정해서 사용해보니 잘 작동하네요.

위 코드가 잘 안 되면 다음과 같은 jQuery 스크립트도 가능합니다.

$('a[href*=#]').on('click', function(event){
event.preventDefault();
$('html,body').animate({scrollTop:$(this.hash).offset().top}, 500);
});

참고로 워드프레스에서 jQuery를 사용하려면 enqueue를 통해 js 파일을 후크시켜야 하고, $ 대신 jQuery를 사용해야 합니다.