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

작동 방식

사이트의 특정 블록으로 사용자의 주의를 끌고 싶다면 이 블록으로 자동 스크롤을 사용자 지정 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일

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

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