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

css

[code]

html {

  scroll-behavior: smooth;

}

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

  html {

    scroll-behavior: auto;

  }

}

[/code]

html

[code]

<p id="top">

<a href="#middle">중앙으로</a><br>

<a href="#bottom">하단으로</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 id="#middle"><a href="#bottom">하단으로</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 id="#bottom"><a href="#top">상단으로</a></p> 

[/code]