앵커 링크에 대해 부드러운 스크롤을 구현하려면 어떻게 해야 합니까?

앵커 링크로 부드러운 스크롤 달성

도움말 섹션 내에 FAQ에 대한 하이퍼링크를 통합하는 것은 사용자에게 특정 정보를 안내하는 일반적인 접근 방식입니다. 앵커 링크를 사용하면 페이지를 대상 위치로 스크롤할 수 있지만 부드러운 스크롤 환경을 구현하면 사용자 상호 작용이 향상될 수 있습니다.

네이티브 및 jQuery 기반 솔루션

최신 버전의 브라우저 이제 부드러운 앵커 스크롤을 위한 기본 솔루션을 지원합니다.

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

    document.querySelector(anchor.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);
});

또한 jQuery는 대상 요소에 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;
});

위 내용은 앵커 링크에 대해 부드러운 스크롤을 구현하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!