앵커 링크를 클릭할 때 부드러운 스크롤

앵커 링크가 있는 웹페이지를 탐색할 때 사용자는 대상 섹션으로 원활하게 전환되기를 기대합니다. 그러나 기본 스크롤 동작은 갑작스러울 수 있습니다. 이 도움말에서는 앵커 링크를 클릭할 때 부드러운 스크롤을 구현하는 기술을 살펴봅니다.

기본 지원

Chrome 및 Firefox와 같은 브라우저에서는 부드러운 스크롤을 위한 기본 지원이 도입되었습니다. 이는 보기로 스크롤할 때 값이 "smooth"인 "behavior" 속성을 사용하여 구현됩니다.

document.querySelectorAll('a[href^="#"]').forEach(anchor => {
    anchor.addEventListener('click', function (e) {
        e.preventDefault();

        document.querySelector(this.getAttribute('href')).scrollIntoView({
            behavior: 'smooth'
        });
    });
});

jQuery 플러그인

이전 브라우저의 경우 jQuery 플러그인을 사용하면 스크롤 애니메이션을 부드럽게 할 수 있습니다. 이 기술은 "animate" 메소드를 사용하여 페이지를 대상 섹션으로 이동합니다:

$(document).on('click', 'a[href^="#"]', function (event) {
    event.preventDefault();

    $('html, body').animate({
        scrollTop: $($.attr(this, 'href')).offset().top
    }, 500);
});

향상된 기술

대상 요소에 ID가 없으면 다음과 같이 수정된 jQuery 플러그인을 사용할 수 있습니다:

$('a[href^="#"]').click(function () {
    $('html, body').animate({
        scrollTop: $('[name="'   $.attr(this, 'href').substr(1)   '"]').offset().top
    }, 500);

    return false;
});

성능 최적화

변수 내에서 "$('html, body')" 선택기를 캐싱하면 성능이 향상됩니다.

var $root = $('html, body');

$('a[href^="#"]').click(function () {
    $root.animate({
        scrollTop: $( $.attr(this, 'href') ).offset().top
    }, 500);

    return false;
});

URL 해시 보존

부드러운 스크롤 시 URL 해시를 업데이트하려면 "animate" 콜백을 사용하세요.

var $root = $('html, body');

$('a[href^="#"]').click(function() {
    var href = $.attr(this, 'href');

    $root.animate({
        scrollTop: $(href).offset().top
    }, 500, function () {
        window.location.hash = href;
    });

    return false;
});

이러한 기술 중 하나를 구현하면 앵커 링크를 사용하여 페이지를 탐색할 때 세련되고 사용자 친화적인 스크롤 환경을 제공할 수 있습니다.