내 웹 사이트의 앵커 링크에 대한 부드러운 스크롤을 어떻게 구현할 수 있나요?-JS 튜토리얼-php.cn

내 웹 사이트의 앵커 링크에 대한 부드러운 스크롤을 어떻게 구현할 수 있나요?

Patricia Arquette

풀어 주다： 2024-12-09 03:45:17

원래의

575명이 탐색했습니다.

How Can I Implement Smooth Scrolling for Anchor Links in My Website?

부드러운 스크롤링으로 앵커 링크 탐색 향상

부드러운 스크롤은 앵커 링크를 사용하여 웹 페이지를 탐색할 때 사용자 경험을 크게 향상시킬 수 있습니다. 거슬리는 점프를 제거하고 원활한 전환을 제공함으로써 페이지의 접근성과 전체적인 미학을 향상시킵니다.

네이티브 JavaScript 사용

최신 버전의 주요 브라우저는 이제 앵커 링크에 대한 네이티브 부드러운 스크롤을 지원합니다. 다음 코드를 사용하여 이 기능을 구현할 수 있습니다.

document.querySelectorAll('a[href^="#"]').forEach(anchor => {
  anchor.addEventListener('click', e => {
    e.preventDefault();
    document.querySelector(anchor.getAttribute('href')).scrollIntoView({ behavior: 'smooth' });
  });
});

로그인 후 복사

jQuery 솔루션

이전 브라우저 호환성을 위해 jQuery는 안정적인 솔루션을 제공합니다.

$(document).on('click', 'a[href^="#"]', event => {
  event.preventDefault();
  $('html, body').animate({ scrollTop: $($.attr(this, 'href')).offset().top }, 500);
});

로그인 후 복사

대상 요소 처리 ID 없음

대상 요소에 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, () => { window.location.hash = href; });
  return false;
});

로그인 후 복사

이러한 기술을 통합하면 웹사이트 사용자에게 원활하고 매력적인 탐색 환경을 제공하여 페이지 콘텐츠를 탐색하는 것을 즐겁게 만들 수 있습니다.

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