앵커 태그만으로 CSS 스크롤 애니메이션을 트리거할 수 있나요?

부드러운 CSS 스크롤 애니메이션 달성

질문:

CSS 스크롤을 트리거할 수 있습니까? 입력 버튼 없이 앵커 태그를 클릭하기만 하면 애니메이션이 생성됩니까?

답변:

예, CSS3 및 앵커 태그를 사용하여 스크롤 애니메이션을 구현할 수 있습니다.

구현:

이 기능을 구현하려면 앵커 링크와 스크롤 컨테이너의 스크롤 동작 속성을 사용하세요. 다음 CSS 규칙 세트는 부드러운 스크롤 동작을 제공합니다.

<code class="css">scroll-behavior: smooth;</code>

브라우저 지원:

이 기술은 Firefox 36, Chrome 61, Safari와 같은 최신 브라우저에서 지원됩니다. 15.4 및 Opera 48.

사용 예:

다음 HTML 및 CSS 코드를 고려하세요.

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


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

사용자가 "푸로 가!" 링크를 클릭하면 브라우저는 ID가 "foo"인 요소까지 부드럽게 아래로 스크롤합니다.

참고: Internet Explorer, Chromium이 아닌 Edge 및 이전 버전의 Safari는 스크롤을 지원하지 않습니다. -행동. 이러한 브라우저에서는 스크롤 동작이 원활하지 않습니다.

위 내용은 앵커 태그만으로 CSS 스크롤 애니메이션을 트리거할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!