diff --git a/blocks/leadspace/leadspace.css b/blocks/leadspace/leadspace.css index f61e982d..f307a929 100644 --- a/blocks/leadspace/leadspace.css +++ b/blocks/leadspace/leadspace.css @@ -681,6 +681,16 @@ main div.leadspace-wrapper { letter-spacing: var(--letter-spacing-02-em); } + .leadspace.video .scroll-border-text { + display: flex; + gap: var(--gap-16); + font-size: var(--font-size-14); + } + + .leadspace.video .scroll-border-text #scroll-to-next { + cursor: pointer; + } + .leadspace.video .video-modal-content video { max-height: 581px; width: 1033px; diff --git a/blocks/leadspace/leadspace.js b/blocks/leadspace/leadspace.js index 2213a089..e7e907a4 100644 --- a/blocks/leadspace/leadspace.js +++ b/blocks/leadspace/leadspace.js @@ -1,3 +1,5 @@ +/* eslint-disable no-plusplus */ +/* eslint-disable consistent-return */ import { getMetadata, decorateButtons, decorateIcons } from '../../scripts/lib-franklin.js'; import { createTag } from '../../scripts/scripts.js'; @@ -142,8 +144,30 @@ export default function decorate(block) { // add scroll border decoration const scrollBorder = createTag('div', { class: 'scroll-border-wrapper' }); - scrollBorder.innerHTML = 'SCROLL'; + scrollBorder.innerHTML = ` + SCROLL + + + `; + block.append(scrollBorder); + const scrollToNext = scrollBorder.querySelector('#scroll-to-next'); + scrollToNext.addEventListener('click', () => { + const sections = document.querySelectorAll('.section'); + let nextSection = null; + + for (let i = 0; i < sections.length; i++) { + const sectionTop = sections[i].offsetTop; + + if (sectionTop > 1000) { + nextSection = sections[i]; + break; // Exit the loop once the next section is found + } + } + if (nextSection) { + nextSection.scrollIntoView({ behavior: 'smooth' }); + } + }); return; }