특정 블록으로 페이지 스크롤을 사용자에게 허용하는 방법

작동 방식

사이트의 특정 블록으로 사용자의 주의를 끌고 싶다면 이 블록으로 자동 스크롤을 사용자 지정 HTML 코드를 통해 설정할 수 있습니다. 기존 솔루션 또는 자체 코드를 추가할 수 있습니다.

획득 방법

기존 솔루션 사용

  1. 게시자 계정 > 웹사이트 빌더로 이동.
  2. 버튼 컴포넌트를 스크롤리 시작해야 하는 블록에 추가합니다. 버튼 문구를 변경합니다.
  3. 컴포넌트 유형을 링크로 설정하고 링크를 필드에 삽입합니다.
  4. 다음 코드를 사용자 정의 코드 블록에 삽입합니다:

Copy
Full screen
Small screen
<script>
(function() {
var scrollBlock = '.block--header';
var scrollBlockNumber = 0;
var scrollButtonNumber = 0;

var scrollToBlockName = '.block--packs';
var scrollToBlockNumber = 0;

var button = document.querySelectorAll(scrollBlock)[scrollBlockNumber].querySelectorAll('.ui-site-calltoaction--link')[scrollButtonNumber];
button.href = 'javascript:void(0)';
button.addEventListener('click', function () {
  var scrollTo = document.querySelectorAll(scrollToBlockName)[scrollToBlockNumber];
  scrollTo.scrollIntoView({ behavior: 'smooth' });
});
})();
</script>

  1. 다음 매개변수 수정:
    • scrollBlock - 스크롤 버튼을 포함하는 블록의 CSS 클래스 이름. 사용 가능 옵션:
      • .block--header (헤더 블록)
      • .block--hero (콜 투 액션 블록)
      • .block--packs ( 블록)
    • scrollBlockNumber - 스크롤 버튼을 포함하는 블록의 순서 번호. 최솟값은 0.
    • scrollButtonNumber - 스크롤 버튼의 순서 번호. 최솟값은 0.
    • scrollToBlockName - 페이지를 스크롤할 블록의 CSS 클래스 이름. 사용 가능 옵션:
      • .block--header (헤더 블록)
      • .block--hero (콜 투 액션 블록)
      • .block--html (사용자 정의 블록)
      • .block--packs ( 블록)
      • .block--description (설명 블록)
      • .block--gallery (갤러리 블록)
      • .block--requirements (시스템 요구사항 블록)
      • .block--faq (FAQ 블록)
      • .block--embed (SNS 위젯 블록)
      • .block--news (뉴스 블록)
      • .block--footer (푸터 블록)
    • scrollToBlockNumber - 페이지를 스크롤할 블록의 순서 번호. 최솟값은 0.

  1. 미리 보기를 클릭하여 변경 내역을 봅니다.

이 지침에 대한 튜토리얼 동영상 시청:


자체 코드 추가

  1. 빌더에서 블록 추가를 클릭하고 사용자 지정 코드를 선택합니다.

  1. 자체 코드를 블록에 삽입합니다.

이 기사가 도움이 되었나요?
감사합니다!
개선해야 할 점이 있을까요? 메시지
유감입니다
이 기사가 도움이 안 된 이유를 설명해 주세요. 메시지
의견을 보내 주셔서 감사드립니다!
메시지를 검토한 후 사용자 경험 향상에 사용하겠습니다.
이 페이지 평가
이 페이지 평가
개선해야 할 점이 있을까요?

답하기 원하지 않습니다

의견을 보내 주셔서 감사드립니다!

유용한 링크

마지막 업데이트: 2021년 7월 20일

오자 또는 기타 텍스트 오류를 찾으셨나요? 텍스트를 선택하고 컨트롤+엔터를 누릅니다.

문제 보고
콘텐츠를 항상 검토합니다. 여러분의 피드백은 콘텐츠를 개선에 도움이 됩니다.
후속 조치를 위해 이메일을 제공해 주세요
의견을 보내 주셔서 감사드립니다!