부드러운 스크롤 스크립트

HTML 내부 목차 클릭 시 부드러운 스크롤 이동 방법

HTML 문서 내 목차 링크를 클릭했을 때, 해당 콘텐츠 위치로 페이지가 부드럽게 스크롤되도록 하는 CSS와 JavaScript 활용법을 설명하고, 각 방법에 대한 HTML 예시를 제공합니다.

목차

• 개요
• CSS를 활용한 방법
• JavaScript를 활용한 방법
• 주의사항 및 팁

개요

웹사이트에서 긴 페이지의 내용을 구조화하기 위해 목차(TOC)를 사용합니다. 목차 링크를 클릭했을 때 해당 섹션으로 즉시 이동하는 것보다 부드러운 스크롤 효과를 적용하면 사용자 경험을 향상시킬 수 있습니다. 이 효과는 CSS 또는 JavaScript를 통해 간단하게 구현할 수 있습니다.

참고

두 방법 모두 HTML 링크의 # 앵커(&<a href="#id값"&>)를 사용하여 콘텐츠 섹션의 id 속성으로 이동하는 원리를 기반으로 합니다.

CSS를 활용한 방법

가장 간단하고 성능이 좋은 방법으로, CSS 속성 하나만으로 문서 전체에 부드러운 스크롤 효과를 적용할 수 있습니다. 대부분의 최신 브라우저에서 지원되므로 특별한 이유가 없다면 이 방법을 사용하는 것이 권장됩니다.

HTML과 CSS 코드 예제

아래와 같은 HTML 구조와 CSS 코드를 함께 사용하면 부드러운 스크롤 효과를 구현할 수 있습니다.

HTML

<div class="toc">
    <ul>
        <li><a href="#section1">섹션 1</a></li>
        <li><a href="#section2">섹션 2</a></li>
    </ul>
</div>

<section id="section1">
    <h2>첫 번째 섹션 제목</h2>
    <p>여기에 섹션 1의 내용이 들어갑니다.</p>
</section>

<section id="section2">
    <h2>두 번째 섹션 제목</h2>
    <p>여기에 섹션 2의 내용이 들어갑니다.</p>
</section>

CSS

html {
    scroll-behavior: smooth;
}

이 속성을 html 요소에 적용하면, # 앵커 링크 클릭 시 모든 스크롤 동작이 부드러운 애니메이션으로 처리됩니다.

JavaScript를 활용한 방법

CSS scroll-behavior를 지원하지 않는 구형 브라우저를 지원해야 하거나, 스크롤 동작을 더 세밀하게 제어하고 싶을 때 사용합니다. element.scrollIntoView() 메서드를 활용하여 부드러운 스크롤 효과를 구현합니다.

HTML과 JavaScript 코드 예제

위와 동일한 HTML 구조를 사용하되, CSS 대신 아래 JavaScript 코드를 추가하여 부드러운 스크롤 효과를 구현할 수 있습니다.

HTML

<div class="toc">
    <ul>
        <li><a href="#section1">섹션 1</a></li>
        <li><a href="#section2">섹션 2</a></li>
    </ul>
</div>

<section id="section1">
    <h2>첫 번째 섹션 제목</h2>
    <p>여기에 섹션 1의 내용이 들어갑니다.</p>
</section>

<section id="section2">
    <h2>두 번째 섹션 제목</h2>
    <p>여기에 섹션 2의 내용이 들어갑니다.</p>
</section>

JavaScript

document.querySelectorAll('a[href^="#"]').forEach(anchor => {
    anchor.addEventListener('click', function (e) {
        e.preventDefault();

        const targetId = this.getAttribute('href');
        const targetElement = document.querySelector(targetId);

        if (targetElement) {
            targetElement.scrollIntoView({
                behavior: 'smooth',
                block: 'start'
            });
        }
    });
});

이 스크립트는 모든 앵커 링크에 클릭 이벤트를 추가하여, 기본 이동 동작을 막고 scrollIntoView() 메서드를 이용해 부드러운 스크롤을 실행합니다.

주의사항 및 팁

• CSS 방식의 장점: 코드가 간결하고 브라우저의 기본 기능을 활용하여 성능이 매우 뛰어납니다.
• JavaScript 방식의 장점: 스크롤 동작을 더 세밀하게 제어하거나, 스크롤 전후에 추가적인 로직을 실행할 수 있습니다.
• scrollIntoView() 메서드는 하드웨어 가속을 활용하여 성능이 좋으므로, jQuery의 animate()와 같은 라이브러리 기반의 애니메이션보다 효율적입니다.

주의

CSS scroll-behavior와 JavaScript scrollIntoView({behavior: 'smooth'})는 IE(Internet Explorer)에서는 지원되지 않습니다. IE 지원이 필요하다면 별도의 스크롤 라이브러리를 사용해야 합니다.