CSS와 앵커를 사용하여 부드러운 스크롤을 달성하려면 어떻게 해야 합니까?-CSS 튜토리얼-php.cn

CSS와 앵커를 사용하여 부드러운 스크롤을 달성하려면 어떻게 해야 합니까?

Barbara Streisand

풀어 주다： 2024-10-29 18:24:02

원래의

274명이 탐색했습니다.

How Can I Achieve Smooth Scrolling with CSS and Anchors?

CSS와 앵커를 사용한 부드러운 스크롤

원활한 사용자 경험을 추구하려면 페이지 상단에 있는 버튼입니다. 입력 버튼과 관련된 CSS 전용 솔루션을 사용할 수 있지만 앵커를 활용하는 대체 접근 방식을 탐색합니다.

부드러운 스크롤을 달성하려면 지정된 스크롤 컨테이너에 대한 스크롤 동작 속성(MDN 참조)을 활용하세요.

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

로그인 후 복사

이 속성은 Firefox, Chrome, Safari, Opera와 같은 최신 브라우저에서 지원됩니다. 그러나 Internet Explorer 및 Chromium Edge가 아닌 브라우저는 스크롤 동작을 지원하지 않습니다.

이를 구현하는 방법의 예는 다음과 같습니다.

<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>

로그인 후 복사

"이동" 버튼을 클릭하면 푸!" 링크를 사용하면 "foo" 요소까지 아래로 부드럽게 스크롤하고 "맨 위로 가기" 링크에서는 그 반대로 스크롤하는 것을 경험하게 됩니다.

이 접근 방식은 추가 버튼이 필요 없이 편리하고 부드러운 스크롤 동작을 제공합니다.

위 내용은 CSS와 앵커를 사용하여 부드러운 스크롤을 달성하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!