Control scrolling panel with buttons in Storyline 360 (using Javascript)

Published: 31 January 2025
on channel: Learnomancer
407
28

If you're using scrolling panels in your Articulate Storyline 360 e-learning modules, you might like this. Find out how to use Javascript code to jump to a specific point in a scrolling panel.

I added three buttons outside of the scrolling panel, and an anchor point beside each section title in the scrolling panel (the monkey heads). The idea is to use the code in a way that, when a button is pressed, the scrolling panel will scroll to the anchor point associated with that button. You can basically control the scrolling panel with buttons.

This can increase the usefulness of scrolling panels and allow you to add a different layer of interactivity to your e-learning courses.

Couldn't achieve a smooth scrolling effect like on a regular web page, but in case they fix this in future Storyline versions, it's good to know that scrollIntoView() also accepts parameters.

More details about scrollIntoView :
https://developer.mozilla.org/en-US/d...

Codepen showcased in the video:
https://codepen.io/devpec/pen/XWyQjdb

#articulatestoryline #elearning #instructionaldesign #storyline360 #javascript #elearningdevelopment #learningdesign


Watch video Control scrolling panel with buttons in Storyline 360 (using Javascript) online without registration, duration hours minute second in high quality. This video was added by user Learnomancer 31 January 2025, don't forget to share it with your friends and acquaintances, it has been viewed on our site 407 once and liked it 28 people.