jQuery 및 기본 JavaScript를 사용하여 앵커 링크에 대한 부드러운 스크롤을 어떻게 구현할 수 있습니까?

앵커 링크를 사용한 부드러운 스크롤

앵커 링크를 활용하여 사용자를 웹페이지의 특정 섹션으로 안내할 때 부드러운 스크롤 경험은 사용자 접근성과 참여도를 향상시킬 수 있습니다. jQuery는 이 효과를 얻기 위한 내장 기능을 제공합니다.

jQuery 기술

jQuery를 사용하여 부드러운 스크롤을 시작하려면 다음 코드를 사용하세요.

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

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

네이티브 접근 방식(최신 접근 방식) 브라우저)

이제 최신 브라우저는 앵커 링크에 대한 기본 부드러운 스크롤을 지원합니다. 다음 코드를 사용하여 이 동작을 구현하십시오.

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

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

추가 고려 사항

ID 속성 없음: 대상 요소에 ID 속성이 없지만 이름으로 식별되는 경우 이 코드:

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

    return false;
});

성능 최적화: 성능 향상을 위해 문서 루트 선택기를 캐시하세요.

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

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

    return false;
});

URL 업데이트: 스크롤하는 동안 URL을 업데이트하려면 다음 콜백을 사용하세요.

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;
});

위 내용은 jQuery 및 기본 JavaScript를 사용하여 앵커 링크에 대한 부드러운 스크롤을 어떻게 구현할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!