HTML로 페이지 내 링크 구현 방법 소개! [스크롤/틀리는 경우는?】

페이지 내 링크란?
페이지 내 링크란 클릭하여 페이지 내 어딘가로 이동할 수 있는 링크를 말합니다.
링크라고 하면 다른 사이트나 페이지로 날아가는 것이 대부분이지만, ′페이지 내 어딘가에 점프하는 링크′를 설치하는 것도 가능합니다.

이 기사에서는 페이지 내에 링크를 설정하는 방법을 소개하겠습니다.
페이지 내 링크 구현 방법
페이지 내 링크는 크게 스크롤하는 타입과 스크롤하지 않고 순식간에 점프하는 타입 두 종류가 있습니다.
스크롤이 있을 경우 조금 할 일이 달라서 나눠서 소개해드릴게요.
스크롤 없음
스크롤하지 않고 순식간에 링크 앞으로 점프하는 페이지 내 링크의 구현은 간단합니다.



우선 링크 대상 HTML 요소에 고유 ID를 설정합니다.
결과
1
2

페이지 내 링크 점프처

그런 다음 링크 대상 요소로 점프할 앵커 링크를 준비합니다.
결과
1
페이지 내 링크
통상, href 속성에는 링크처 URL을 지정합니다만, 페이지내 링크를 지정하는 경우는 「#(샤프)」로 시작하는 ID명을 지정합니다.

그렇기 때문에 이번이라면 href 속성이 #jumpto라고 되어 있는 것입니다.
결과
1
2
3
4
5
6
페이지 내 링크

페이지 내 링크 점프처

ID가 여러 개 있으면 올바르게 점프해 주지 않는다고 생각할지도 모릅니다. 하지만, 원래 논으로서 동일 ID가 여러 개인 페이지는 HTML 기술 룰을 위반하고 있어 본래 있어서는 안 되는 것입니다.

그래서 아이디가 여러 개 있어서 페이지 내 링크가 정상적으로 작동하지 않는다면 집의 HTML 코드를 재검토하거나 다른 곳에서 사용하지 않는 고유 아이디로 변경하도록 하겠습니다.

덧붙여서 HTML 기술 규칙에서 복수 요소로의 지정이 인정되고 있는 class로의 점프는 할 수 없습니다.
ID명을 사용하지 않고 점프하는 경우
중복 ID로 인한 문제를 줄이기 위해 그다지 ID를 부여하고 싶지 않은 분들도 있을 것입니다.

이 경우 name 속성을 사용하세요.
결과
1
2
3
4
5
페이지 내 링크

페이지 내 링크 점프처name 속성은 페이지 내 링크에 사용할 수 있는 속성 중 하나입니다.페이지 내 링크 목적이라면 아이디의 경우와 동일하게 사용할 수 있습니다.

ID 지정을 CSS 설정으로만 한정하고 있다고 하는 경우는 페이지 내 링크용을 name 속성으로 하고, 을 다른 요소와 차별화할 목적으로 사용하면 좋을 것입니다.
스크롤 있음
스크롤이 있는 페이지 내 링크를 구현하려면 jQuery의 스무스 스크롤 기능을 이용합니다.

그러므로 jQuery 를 읽지 않은 경우는 자신의 서버에 설치해 읽거나 CDN 에서 읽도록 해 주세요.

name·ID 지정이나 앵커 링크의 href 속성의 지정은 스크롤하지 않는 방법과 같기 때문에, 설정이 끝난 앵커 링크 등을 준비해 둡시다.
결과
1
2
3
4
5
6
페이지 내 링크













페이지 내 링크 점프처

그런 다음 위 코드를 자바스크립트 파일이나 HTML 파일 내 script 요소로 붙여넣습니다.(샘플은 HTML 파일에 기술하고 있습니다.
결과
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

페이지 내 링크


Text

Text

Text

Text
페이지 내 링크 점프처
이것만으로 페이지 내 링크를 클릭하면 매끄럽게 스크롤하면서 점프하는 곳으로 이동해 줍니다.
페이지 내 링크 구현 Q&A
페이지 내 링크의 구현에서 자주 있는 트러블에 대해 정리했습니다.
페이지 내 점프를 잘 하지 않는 경우의 원인은?
링크로 날아가지 않는 가장 큰 원인이 점프처 ID, name과 href 속성이 일치하지 않는 것입니다.

각각의 텍스트가 한 글자라도 틀리면 페이지 내 링크가 작동하지 않기 때문에 클릭해도 아무것도 변하지 않는다면 한 번 철자를 확인하도록 합시다.

그리고 가능하다면 카피 페이스트로 지정하는 것이 가장 좋습니다.
점프 위치가 어긋나는 경우는?
점프 위치가 어긋나는 가장 큰 원인은 화상의 지연 읽기를 실시하는 lazy load를 Java Script·jQuery로 실장하고 있고, 게다가 스크롤을 활성화하고 있을 때입니다.

lazy load 를 실장하고 있는 경우, 실제로 화상 읽기가 시작되기 전에는 가로세로 1 x 1 의 화상이 표시되어 있습니다.그 이미지 크기를 반영한 후 점프 위치를 계산하기 때문에 점프 위치가 어긋나 버립니다.

점프 스크롤을 활성화한 후 이 문제를 해결하려면 사이트마다 다른 프로그램을 짜야 하는데다 스무스 스크롤을 1부터 구현해야 하기 때문에 그다지 현실적이지 않습니다.

CSS에서 억지로 회피하는 방법은 있지만 이미지 삽입 사이즈가 한정되어 매우 사용하기 불편하기 때문에 추천하지 않습니다.

옛날부터 lazy load와 스무스 스크롤도 궁합이 맞지 않는 것으로 알려져 있기 때문에 lazy load를 뺄 수 없는 경우는 페이지 내 링크의 스무스 스크롤을 사용하지 않도록 하십시오.
정리
이번에는 HTML에서 페이지 내 링크를 구현하는 방법을 소개했습니다.
스크롤하면서 점프하는 경우에 한해서 HTML 이외에 jQuery가 필요한데 복사 페이스트로 사용할 수 있기 때문에 초보자에게는 손도 발도 안 나오는 것은 아닐 것입니다.

페이지 내 링크를 구현하고 싶다면 샘플 코드를 참고하면서 기술해 보세요.