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

앵커 링크에 대한 부드러운 스크롤 생성

부드러운 스크롤은 앵커 링크를 사용하여 페이지 내에서 탐색할 때 사용자 경험을 향상시킵니다. 이 기사에서는 이 효과를 달성하기 위한 두 가지 접근 방식, 즉 최신 브라우저와 호환되는 기본 방법과 더 광범위한 지원을 위한 jQuery 구현을 제공합니다.

최신 브라우저를 위한 기본 방법:

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

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

노인을 위한 jQuery 방법 브라우저:

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

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

참고: ID가 없는 요소의 경우 다음 변형을 사용해야 합니다.

$('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에 현재 섹션을 반영하려는 경우 다음 변형을 사용하세요.

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

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