Javascript scrollIntoView not working correctly
Jun 21, 2023
Hi so I'm trying to recreate this:
https://www.youtube.com/watch?v=c_WjEe0qzUo&feature=youtu.be
I've changed the javascript to all be on one line but regardless it doesn't work correctly like it does in the video and I don't understand why. It just somewhat scrolls down not even to the objects that it supposed to.
The thing is that when I execute the script in the console while having the published file open it works correctly. Can anyone tell me why this is happening? I've attached my storyline file for reference.
Edit:
My issue ended up being that the buttons that you click cannot be in the scroll box they have to be outside/floating on top of it otherwise the script won't work properly.
5 Replies
you have to add the "names of the objects" for the search to the "Alternate Text"
document.querySelectorAll('[data-acc-text="section2"]')[0].scrollIntoView();If you scroll down further in the scroll box you'll see that there's similarly colored boxes that have the requisite "Alternate Text". The colored boxes at the top should scroll to each one of the similar color below. Otherwise the published file wouldn't have them doing anything at all rather than just slightly scrolling downwards.
Works fine for me in Chrome https://360.articulate.com/review/content/6d17472c-7ee1-4d63-b0c9-916167bf3266/review
I had to edit the code to this
var section1 = document.querySelectorAll('[data-acc-text~="section1"]');section1[0].scrollIntoView({block: "end",inline: "nearest"});
I have figured out my issue, apparently if the buttons are within the scroll box then it will not work properly. They have to be outside of it. Thank you all.
Open the browser's developer console (usually by pressing F12) and look for any error messages that might indicate issues with your JavaScript code.
These error messages can provide valuable clues about syntax errors, variable scope problems, or other issues preventing the code from working as expected.
Use browser developer tools to set breakpoints in your code and step through it line by line. This can help you see what values are being assigned to variables and how the code is executing.
Consider using a debugging library like console.log statements to print intermediate values and trace the script's execution flow to identify where things are going wrong.