scroll-behavior 속성은 스크롤 동작을 설정하는 데 사용됩니다. scroll-behavior 속성에 대해 다음과 같은 다른 속성 값을 설정할 수 있습니다 -
scroll-behavior: auto|smooth|initial|inherit;
예시
이제 sroll-behavior 속성을 구현하는 예를 살펴보겠습니다 -
<!DOCTYPE html> <html> <head> <style> html { scroll-behavior: smooth; } #area1 { height: 400px; background-color: red; } #area2 { height: 600px; background-color: orange; } #area3 { height: 550px; background-color: magenta; } </style> </head> <body> <h1>Demo Heading</h1> <div class="main" id="area1"> <h2>Section 1</h2> <a href="#area2">Reach Section 2</a> </div> <div class="main" id="area2"> <h2>Section 2</h2> <a href="#area3">Reach Section 3</a> </div> <div class="main" id="area3"> <h2>Section 3</h2> <a href="#area1">Reach Section 1</a> </div> </body> </html>
출력
이제 "섹션 2에 도달"을 클릭하십시오 -
이제 섹션 3으로 부드럽게 스크롤하려면 "섹션 3에 도달"을 클릭하십시오 -