css 만으로 내부링크 부드럽게 이동 > IT 기술백서

css

[code]

html {

  scroll-behavior: smooth;

}

@media screen and (prefers-reduced-motion: reduce) {

  html {

    scroll-behavior: auto;

  }

}

[/code]

 

html

[code]

<p>

<a>중앙으로</a><br>

<a>하단으로</a>

</p>

<p>

.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>

.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>

.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.

</p>

<p><a>하단으로</a></p>

<p>

.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>

.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>

.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.

.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>

.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>

.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.

</p>

<p><a>상단으로</a></p> 

[/code]