I’m working on replicating an old page with Builder but can’t figure out how to get separate divs/sections highlighted on the menu, according to where I scroll on the page.
Here’s a link to the original page I’d like to replicate:
Thanks for considering this question and I look forward to hearing back!
Hi @jackmielke
Links that direct a user to another part of the page are called hashlinks. You can learn more about setting that up here: Linking within pages in Builder.io - Builder.io
Regarding the dynamic styling that occurs when sections scroll into view, this is possible by using a scroll event listener in Javascript. If you’re familiar with Javascript, please check out this Fiddle that I created that shows this functionality in action. You can click on different elements to see how they work in Builder, but this is a pretty challenging result to get if you aren’t already a developer.
Please let me know if there’s more I can do to help you on this one!
Thanks,
~Logan from Builder.io
Awesome, thanks. I’ve just got one more question: the links I set to different parts of the page don’t seem to direct me exactly where I want to go, and I’m not sure what the best way to fix this is…
Do you recommend setting up new divs/boxes that are slightly higher or is there a more efficient way to position them all automatically higher with something like CSS?
Hey @jackmielke!
In the Data Tab, scroll to the “Edit JS + CSS” button and open the code panel. In the CSS panel, use your hashlink to select the element and include the :target psuedoclass. Add some scroll-margin-top to the element so that it’s pushed away from the very top of the page. For example, if you have a section called “Returns” and you gave it the ID of ‘returns’, your code would look like this:
#returns:target {
scroll-margin-top: 100px;
}
It’s also possible to do this with Javascript, which opens up some additional alignment options and also allows you to execute other stuff (like maybe applying styles) at the same time.
First, select the element that, when clicked, will link to another location on the page. Head to the Data tab in the Visual Editor and give it an Element Event of Click. Select “Edit Action” and then “Custom Code”.
Paste in the following code:
let section = document.querySelector('#SECTION_ID_GOES_HERE');
section.scrollIntoView({behavior: "smooth", block: "center", inline: "nearest"});
Then, edit the ‘#SECTION_ID_GOES_HERE’ to match the hashlink of the element. For example, if you have a section called “Returns” and you gave it the ID of ‘returns’, your code would look like this:
let section = document.querySelector('#returns');
section.scrollIntoView({behavior: "smooth", block: "center", inline: "nearest"});
If the element scrolls into view but now is no longer aligned to the right spot, you can change the block: "center" of the second line of code to different alignments: start , center , end , or nearest.
You can also add other lines of Javascript after this, such as this code, which animates the addition of a subtle drop shadow to the element that was clicked:
event.target.style.transition = '.3s ease-in-out';
event.target.style.boxShadow = '0px 0px 50px 0px rgba(0,0,0,0.25)';
Thank you!
~Logan from Builder.io
I weirdly can’t access the JS and CSS… No matter where I click before hand, it won’t let me get in and it just appears gray. (Also tried it with other pages and I couldn’t edit that code anywhere.)
Sorry for the inconvenience but hopefully there’s a quick answer… Here’s the ss:
This should be the result of you having an account without access to the custom code panel. Please contact your admin and ask for permission to be set as a developer in the Space 
Great to know. Thanks Logan!
