<div id="readability-page-1" class="page"><div>
<p>아래처럼 html에 <code>scroll-behavior</code> 속성을 <code>smooth</code>로 설정하면 앵커(<code>#</code>으로 시작하는 링크)를 클릭해 이동할 때 부드럽게 이동하게 된다.</p>



<p>참고로 그 밑에 <code>scroll-padding-top: 50px;</code>는 이렇게 앵커 클릭으로 이동할 때 목표지점에 딱 붙에 스크롤하지 말고 50px을 더 스크롤하라는 뜻이다. 해 보면 무슨 말인지 쉽게 알 수 있을 것이다.</p>



<pre><code>html {
   scroll-behavior: smooth;
   scroll-padding-top: 50px;
}</code></pre>
</div><div id="about">
<figure><img width="300" height="300" src="https://mytory.net/wp-content/uploads/2024/05/profile-300x300-1.webp" alt=""></figure>
</div></div>

웹으로 말하기

아래처럼 html에 scroll-behavior 속성을 smooth로 설정하면 앵커(#으로 시작하는 링크)를 클릭해 이동할 때 부드럽게 이동하게 된다. 참고로 그 밑에 scroll-padding-top: 50px;는 이렇게 앵커 클릭으로 이동할 때 목표지점에 딱 붙에 스크롤하지 말고 50px을 더 스크롤하라는 뜻이다. 해 보면 무슨 말인지 쉽게 알 수 있을 것이다.

앵커 클릭시 부드럽게 이동하게 만드는 CSS 조각

댓글