[jQuery] 동일 페이지 내에서 부드럽게 스크롤시키기

동일 페이지 내에서 링크를 클릭했을 때 부드럽게 스크롤되도록 하려면 다음 jQuery 스크립트를 사용할 수 있습니다.

$(function() {
$('a[href*="#"]:not([href="#"])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html, body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
});
// Source: css-tricks

여기에서 데모를 볼 수 있습니다.

또는 w3schools에서 제공하는 스크립트를 사용할 수도 있습니다. 자세한 스크립트와 데모는 이 글을 참고해보시기 바랍니다.

워드프레스에서 jQuery 스크립트를 적용하려면 Enqueue를 시켜주는 과정이 필요합니다(참고).

워드프레스 테마에서 부드럽게 스크롤(Smooth Page Scrolling)하는 기능을 제공하는 경우도 있습니다. 예를 들어, 다목적 워드프레스 테마 중 하나인 Bridge에서 원페이지(One-page)로 구성할 경우 부드럽게 스크롤되는 기능을 이용할 수 있습니다(참고). X 테마의 데모 페이지에서도 이와 같은 스크롤 기능을 확인할 수 있습니다.

테마에서 부드럽게 스크롤 기능을 지원하지 않는 경우 위의 스크립트를 복사하여 js 파일로 저장한 다음, 함수 파일에 js 파일을 후크(Enqueue)시키면 동일한 효과를 얻을 수 있습니다. (참고: 워드프레스에서는 $를 jQuery로 바꾸어야 제대로 작동합니다.)