Forum Discussion
Vertical Storyline Scrolling
Thank you for clarifying. I see you have two additional buttons (Layer 1 and Layer 2) on the base layer that remain visible on each layer. The issue isn’t with the code itself, but rather with those buttons triggering actions and maintaining focus. This focus precedence prevents the layer from scrolling to the top content as expected. These buttons don’t need to be visible on other layers, as they’re redundant — you already have duplicate buttons on each layer for navigating back and forth. I’ve modified your file so that the JavaScript runs on each layer and changes the state of whichever base layer button gets clicked first to 'Hidden'. Preview the file and let me know if the issue is resolved.
Hi DanielleForm330 ,
The only way I know how to achieve what you want is to add some JS. I learned how to do similar from a super helpful thread a while back. Vertical scroll bar scroll into view. I am not a js expert - still learning. All kudos to superhero SamHill SteveGannon for sharing expertise, the poster for posting - allowing others to learn from his question, and all other posters on the thread.
I also use, among other sites and youtube, Learn JS
Articulate also has a JS group with super helpful contributors and experts who generously share their knowledge: JS Forum Articulate
Here is your file edit - added js on slide 1.3. Scroll bar goes to top of 1.3 when timeline begins.
js from SamHill see "Verticall scroll bar..." link above for details: and here is Review output of edited story
Hi Ange ,
That's a nice workaround, but in this particular case, we don't need to overcomplicate it. Since the scroll behavior is automatically applied by Storyline at the slide level, just target the slide container directly and scroll it to the top like this:
document.querySelector('#slide').scrollTop = 0; Let's say you just want to do the opposite — scroll to the bottom instead:
var slide = document.querySelector('#slide');
slide.scrollTop = slide.scrollHeight - slide.clientHeight;scrollHeight: total scrollable content height
clientHeight: visible height of the element
So, the difference gives you the scroll position for the bottom.
Thank you! This is great and it was so easy! It works for the slides, but not for the layers. I tried using CoPilot to get javascript for the layers, and that doesn't work either. Any suggestions?
Your original .story file didn’t have any layers. If you're using a different version with layers, please share it and let us know what issue you're trying to solve.
Technically, all layers sit inside the same container (<div id="slide">), so the scrollbar you see stays the same across the course — it's based on the overall project height.
I moved the text box on the final slide to a layer and used the same line of code — it worked.I must be doing something wrong, so thank you for your help! This is not something I'm super familiar with. Your initial suggestion worked perfectly for our guidelines without layers, so then I went and tried to update the guidelines that include layers and can't get it to work. Maybe I'm setting the trigger incorrectly. Here is a pretty bare example that shows my issue and layers not starting at the top.