티스토리 블로그 목차 부드러운 스크롤 적용 방법(문서 내부 링크 이동)

높은 구글 SEO 점수를 위해서는 블로그 글 내에 목차를 생성하는 것이 좋습니다. 목차를 통해 방문자는 글의 내용을 쉽게 파악할 수 있고, 목차의 하이퍼링크를 통해 원하는 위치로 이동할 수 있기 때문입니다. 그런데 링크를 통한 이동은 바로 순간이동이 되기 때문에 지나친 내용은 확인할 수 없습니다. 부드러운 스크롤을 적용해서 지나간 내용을 확인하게끔 하는 방법을 소개합니다.

 

 

목차

 

 

1. 티스토리 블로그 목차

 

목차 예시

 

티스토리에는 위와 같이 목차를 생성하면 글 내용을 빠르게 파악할 수 있습니다. h2, h3, h4 제목 태그가 설정된 위치로 하이퍼링크가 걸려있기 때문에 목차의 하이퍼링크를 클릭하면 해당 태그 위치로 바로 이동됩니다.

 

다른 웹페이지로 연결되는 URL이라면 부드러운 이동이 필요하지 않습니다. 그러나 문서 내부 링크로 이동하는 경우에는 해당 글을 처음 읽는 사람에게는 책을 빠르게 넘기는 것처럼 글 내용도 빠르게 내려가면서 미리 보여주는 게 좋습니다.

 

 

 

2. 부드러운 스크롤

 

부드러운 스크롤을 적용하는 방법은 간단합니다. 아래 코드를 CSS에 추가하면 됩니다.

 

html {
    scroll-behavior: smooth;
}

 

스킨편집에서 HTML 수정 항목으로 들어간 후, CSS 편집기로 접속합니다. CSS 편집기 가장 마지막 행에 위 코드를 추가해줍니다.

 

CSS 편집기

 

위와 같이 scroll-behavior: smooth; 코드를 넣어주면 해당 스타일이 웹페이지에 적용되어서 스크롤 동작이 부드럽게 이뤄집니다.