앵커 태그만으로 CSS 스크롤 애니메이션을 트리거할 수 있나요?-CSS 튜토리얼-php.cn

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

Linda Hamilton

풀어 주다： 2024-10-30 00:49:29

원래의

233명이 탐색했습니다.

Can I Trigger CSS Scroll Animation with Just an Anchor Tag?

부드러운 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

Php8, 나도 갈게

30분 안에 웹사이트 레이아웃 배우기

Shangguan Oracle 초보자부터 능숙한 비디오 튜토리얼까지

UNI-APP 코드의 첫 번째 줄

처음부터 앱 실행까지 Flutter

Lian 형제 새 Linux 비디오 튜토리얼

AXURE 9 비디오 튜토리얼(제품 관리자 대화형 제품 디자인 UI에 적합)

Zero 기본 숙련도 PS 비디오 튜토리얼

시작하는 데 도움이 되는 16일 UI 비디오 튜토리얼

PS 기술 및 슬라이싱 기술 비디오 튜토리얼

Alibaba Cloud 환경 구축 및 프로젝트 출시 비디오 튜토리얼

컴퓨터 네트워크 개요 - 프로그래머가 마스터해야 하는 기본 지식

프로그래머를 위한 필수 튜토리얼 - HTTP 프로토콜 설명

웹소켓 비디오 튜토리얼

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