So here is my code for scrollTo functionality now:
// Smooth scrolling on anchor links
document.querySelectorAll(".scrollNav a").forEach((btn, index) => {
btn.addEventListener("click", (e) => {
e.preventDefault();
var sectionNum = "#section" + (index + 1);
var divHeight = $(sectionNum).height(); // Get Height of section inside #scrollArea
var scrollHeight = $(sectionNum).offset().top - (divHeight); // create offset with the top
console.log(sectionNum + ":" + scrollHeight);
gsap.to(window, {
duration: 2,
scrollTo: {
y: scrollHeight, // pass the final calculation
ease:Power2.easeOut,
autoKill: true,
}
});
});
});
Only issue that I'm having is that if the user goes down to section five but wants to return to a section above it; the calculation isn't working right.
Trying to combat this right now and figure out why that is. Can someone please tell me if my calculation is wrong? or how I'm inputting said calculation is the issue?
Thank you!