상단 이동 스크롤 버튼 만들기 (위젯 사용)

이 도움말은 웹사이트 하단에 위로 이동 스크롤 버튼을 추가하는 방법을 설명합니다.

제작방법

1단계: 빈 섹션 추가하기

위로 이동 버튼을 추가할 새로운 빈 섹션을 추가합니다.

  1. 디자인 모드에 접속합니다. 
  2. 빈 섹션 추가하기 도움말을 참고하여 섹션을 추가합니다.

2단계: 섹션 반복 설정하기

어느 메뉴에서나 위로 이동 버튼이 보이게 새로 추가한 빈 섹션을 바복 섹션으로 설정합니다.

  1. 새로 추가한 빈 섹션에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다.
  2. 섹션 컨텍스트 메뉴가 나오면 아래로 이동을 클릭합니다.
  3. 위 1~2번 과정을 반복해 페이지 가장 아래로 이동시켜 주세요.
  4. 가장 아래로 이동을 마쳤다면 섹션에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다.
  5. 섹션 컨텍스트 메뉴가 나오면 섹션 반복을 클릭합니다.
  6. 이 섹션은 이제 어느 메뉴에서든 표시됩니다.
    참고: 특정 메뉴에서는 반복 섹션이 안 보이게 숨길 수도 있습니다. 특정 메뉴의 반복 섹션 숨김 처리하기 도움말을 확인해 보세요.

3단계: TOP 버튼 추가하기

참고: 버튼 위젯 대신 이미지 위젯 등 다른 위젯으로도 구성할 수 있습니다.

  1.  버튼 위젯을 페이지에 추가합니다.
  2. 버튼 위젯에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다.
  3. 컨텍스트 메뉴가 나오면 버튼 설정을 클릭합니다.
  4. 버튼 설정 창이 나오면 버튼 항목에서 텍스트 옵션에 버튼 이름을 작성합니다. (예: TOP 등)
  5. 링크 항목을 코드로 변경하고, 입력칸에 #doz_header를 작성합니다.

4단계: 동작 여부 확인하기

  1. 디자인 모드 오른쪽 상단의 미리보기 아이콘을 클릭합니다.
  2. 상단 또는 하단 이동 스크롤 버튼이 정상적으로 표시되고 동작하는지 확인합니다.
  3. 문제가 없다면 디자인 모드로 돌아가 게시하기 버튼을 클릭해 적용합니다.

추가 도움말

상단 스크롤 이동 버튼이 동작하지 않나요?

메뉴에 상단 숨김 옵션을 적용했다면 상단 이동 버튼이 정상적으로 동작하지 않을 수 있습니다. 그 이유는 이 도움말에서 제공하는 코드가 캠페이너스 기본 상단 디자인(상단 설정하기 )을 이용 중인 사용자를 대상으로 제작되었기 때문입니다.

가이드 내 코드를 정상적으로 사용하기 위해서는 상단 숨김을 해제해 주세요.

특정 메뉴에서 위로 이동 스크롤 버튼 감추기

특정 메뉴에서 상단 이동 스크롤 버튼이 표시되지 않도록 감출 수 있습니다.

설정방법

  1. 디자인 모드 왼쪽 상단의 메뉴 관리 ≡ 아이콘을 클릭합니다.
  2. 글로벌 메뉴에서 통합검색 을 클릭합니다.
  3. 빈섹션을 추가합니다.
  4. 추가된 섹션에 위젯 추가 ＋ 아이콘을 클릭합니다.
  5. 코드 위젯을 추가합니다.
  6. 코드 위젯에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다.
  7. 컨텍스트 메뉴가 나오면 코드 설정을 클릭합니다.
  8. 아래의 코드를 복사해 코드 설정 칸에 붙여넣습니다.
    <style> /* 상단 이동 스크롤 버튼 숨김 */ #섹션ID {display: none !important;} </style>
  9. 섹션 ID 확인하기 도움말을 참고하여 TOP 버튼이 있는 섹션 ID를 확인하고, 코드 내 섹션 ID를 수정합니다.
  10. 저장 버튼을 클릭해 적용합니다.
  11. (선택 사항) TOP 버튼을 노출하고 싶은 다른 메뉴에도 위 과정을 진행합니다.
    참고: 위젯 복사 기능을 활용하면 더 빠르고 간편한 작업이 가능합니다.