버튼 없이 순수한 CSS 스크롤 애니메이션을 만들 수 있나요?

단순한 CSS 스크롤 애니메이션

입력 버튼에 의해 트리거되는 스크롤 애니메이션을 구현하는 것은 인상적이지만 다음과 같은 질문이 생깁니다. 앵커 태그만 사용하시겠습니까?

해결책

버튼 없이 부드러운 스크롤 애니메이션을 만들기 위해 스크롤 동작 속성과 결합된 앵커 링크를 활용할 수 있습니다. Firefox, Chrome 및 Safari와 같은 최신 브라우저에서 지원되는 이 속성은 지정된 컨테이너 내에서 스크롤 동작을 지정합니다.

이 솔루션을 구현하려면:

1. 부드러운 활성화 스크롤링: 스크롤 동작 추가: 부드러움; 원하는 컨테이너(예: html 또는 스크롤할 콘텐츠의 상위 요소)에 추가하세요.
2. 앵커 링크 만들기: 앵커 태그()를 사용하여 특정 섹션에 연결하세요. 또는 페이지의 요소.
3. 앵커 대상 추가: 해당 ID가 있는 HTML 요소를 사용하여 앵커 링크의 대상을 지정합니다.

사용 예 :

<code class="html">
  <style type="text/css">
    html {
      scroll-behavior: smooth;
    }
  </style>


  <a href="#foo">Go to foo!</a>

  <!-- Some content -->

  <div id="foo">That's foo.</div>
  <a href="#body">Back to top</a>
</code>

브라우저 지원:

이 기술은 널리 사용되는 브라우저, 이전 버전의 Internet Explorer, Chromium이 아닌 브라우저에서 지원된다는 점을 명심하세요. Edge 및 Safari는 이를 지원하지 않을 수 있으며 링크 대상으로 순간적으로 점프하는 데 의존할 수 있습니다.

위 내용은 버튼 없이 순수한 CSS 스크롤 애니메이션을 만들 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!