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

작동 방식

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

획득 방법

기존 솔루션 사용

1. 관리자 페이지에서 프로젝트를 엽니다.
2. 사이드 바에서 웹사이트 빌더를 클릭합니다.
3. 웹사이트 빌더 열기를 클릭합니다.
4. 버튼 구성 요소를 스크롤을 시작해야 하는 블록에 추가합니다. 버튼 문구를 변경합니다.
5. 구성 요소 유형을 링크로 설정하고 링크를 필드에 삽입합니다.
6. 다음 코드를 사용자 정의 코드 블록에 삽입합니다.

<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>

7. 다음 매개변수 수정:
   • 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.

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

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

자체 코드 추가

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

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

유용한 링크