앵커 태그만으로 CSS 스크롤 애니메이션을 트리거할 수 있나요?
- Linda Hamilton원래의
- 2024-10-30 00:49:29322검색
부드러운 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"><head>
<style type="text/css">
html {
scroll-behavior: smooth;
}
</style>
</head>
<body id="body">
<a href="#foo">Go to foo!</a>
</body></code>
사용자가 "푸로 가!" 링크를 클릭하면 브라우저는 ID가 "foo"인 요소까지 부드럽게 아래로 스크롤합니다.
참고: Internet Explorer, Chromium이 아닌 Edge 및 이전 버전의 Safari는 스크롤을 지원하지 않습니다. -행동. 이러한 브라우저에서는 스크롤 동작이 원활하지 않습니다.
위 내용은 앵커 태그만으로 CSS 스크롤 애니메이션을 트리거할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.