입력 버튼에 의해 트리거되는 스크롤 애니메이션을 구현하는 것은 인상적이지만 다음과 같은 질문이 생깁니다. 앵커 태그만 사용하시겠습니까?
해결책
버튼 없이 부드러운 스크롤 애니메이션을 만들기 위해 스크롤 동작 속성과 결합된 앵커 링크를 활용할 수 있습니다. Firefox, Chrome 및 Safari와 같은 최신 브라우저에서 지원되는 이 속성은 지정된 컨테이너 내에서 스크롤 동작을 지정합니다.
이 솔루션을 구현하려면:
사용 예 :
<code class="html"><head>
<style type="text/css">
html {
scroll-behavior: smooth;
}
</style>
</head>
<body id="body">
<a href="#foo">Go to foo!</a>
<!-- Some content -->
<div id="foo">That's foo.</div>
<a href="#body">Back to top</a>
</body></code>브라우저 지원:
이 기술은 널리 사용되는 브라우저, 이전 버전의 Internet Explorer, Chromium이 아닌 브라우저에서 지원된다는 점을 명심하세요. Edge 및 Safari는 이를 지원하지 않을 수 있으며 링크 대상으로 순간적으로 점프하는 데 의존할 수 있습니다.
위 내용은 버튼 없이 순수한 CSS 스크롤 애니메이션을 만들 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
