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