동일 페이지 스크롤 앵커 링크 추가하기

작성자

카테고리:

,

동일 페이지 스크롤 앵커 링크 추가하기

이 기능은 프리미엄 기능이며 버전 4.0.1 이상에서 사용할 수 있습니다.

동일 페이지 스크롤 앵커 링크는 동일한 페이지 내의 특정 위치를 가리키는 링크입니다. 동일 페이지 링크를 클릭하면 브라우저가 지정된 영역으로 스크롤됩니다.

동일 페이지 앵커 링크를 만들려면 두 가지가 필요합니다:

  1. 요소의 사용자 정의 클래스 또는 사용자 정의 ID, 그리고
  2. 해당 사용자 정의 클래스 또는 ID를 참조하는 링크나 버튼

1. 요소에 사용자 정의 클래스 또는 사용자 정의 ID 추가

페이지 하단 근처에 있는 요소를 선택한 다음 속성을 엽니다. 고급 영역에서 “go_here“

2. 사용자 정의 클래스 또는 ID를 참조하는 링크나 버튼

이제 페이지 상단 근처에 링크를 만들거나 버튼 요소를 추가합니다. 링크로 URL을 추가하는 대신, “go_here”를 사용자 정의 클래스로 추가한 경우 “.”을 포함하여 “.go_here“를 사용하고, 사용자 정의 ID로 추가한 경우 “#”을 포함하여 “#go_here“를 사용합니다.

페이지를 저장한 후 링크/버튼을 클릭하면 이제 페이지 하단의 요소를 향해 부드럽게 스크롤됩니다.

이 방법을 사용하여 명명된 앵커(Named Anchor)를 타겟팅할 수도 있습니다

다음과 같은 명명된 앵커는

<a name="go_here"></a>

“#”을 포함한 “#go_here“로 링크를 추가하여 타겟팅할 수도 있습니다.

기타 용도

클래스 이름이나 ID를 사용하여 타겟팅하는 한 편집기 영역 외부를 포함하여 페이지 내의 다른 모든 영역도 타겟팅할 수 있습니다.