앵커(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를 사용해야 합니다.

기부를 통해 이 블로그의 운영을 후원하실 수 있습니다. 워드프레스와 관련하여 문제 해결이 필요한 경우 서비스를 의뢰(유료)하실 수 있습니다.

서비스 문의