css
[CSS] 앵커 링크에 부드러운 스크롤 효과를 추가하는 속성
앵커 링크에 부드러운 스크롤 효과를 추가합니다.
scroll-behavior 속성은 사용자가 스크롤 가능한 박스 내의 링크를 클릭할 때, 스크롤 위치를 곧바로 점프하는 대신 부드럽게 애니메이션할지 여부를 지정할 수 있습니다.
이 속성의 문제 중 하나는 스크롤 효과가 body 태그에서 지원되지 않는다는 것입니다.
scroll-behavior: auto|smooth|initial|inherit;scroll-behavior 속성은 사용자가 스크롤 가능한 박스 내의 링크를 클릭할 때, 스크롤 위치를 곧바로 점프하는 대신 부드럽게 애니메이션할지 여부를 지정할 수 있습니다.
| 값 | 설 명 |
|---|---|
| auto | 기본값. 스크롤 박스 내의 요소 간에 직선 점프 "스크롤 효과"를 허용합니다. |
| smooth | 스크롤 박스 내의 요소 간에 부드러운 애니메이션 "스크롤 효과"를 허용합니다. |
html {
scroll-behavior: smooth;
}이 속성의 문제 중 하나는 스크롤 효과가 body 태그에서 지원되지 않는다는 것입니다.
아래 예제와 같이 html 태그에 클래스나 ID를 추가하거나 해당 페이지에 인라인으로 코드를 추가하는 것은 가능하지만 부분적으로만 적용하려는 경우 전혀 동작하지 않습니다.
<html id="landing_page">
<body>
<div>
<a href="#">하이퍼 링크</a>
</div>
</body>
</html>이럴 때는 js를 이용해 구현해야 합니다.
0 댓글