Hi, I don't think it's possible to create a CodePen.
I have a smoother scroll enabled, and When I click a link e.g (Ruby.com/about#me), it scrolls to the anchor, but the page is messed up. You can't scroll to the top (it's cut off), it doesn't load at the top of the anchor (loads half way down), and theres a huge gap at the bottom.
I've tried to use scrollTrigger.update/refresh but to no avail.
Thanks again!
function getSamePageAnchor (link) {
if (
link.protocol !== window.location.protocol ||
link.host !== window.location.host ||
link.pathname !== window.location.pathname ||
link.search !== window.location.search
) {
return false;
}
return link.hash;
}
// Scroll to a given hash, preventing the event given if there is one
function scrollToHash(hash, e) {
const elem = hash ? document.querySelector(hash) : false;
if(elem) {
if(e) e.preventDefault();
// Scroll to the element in the URL's hash on load
gsap.to(window, {scrollTo: elem});
}
}
// If a link's href is within the current page, scroll to it instead
document.querySelectorAll('a[href]').forEach(a => {
a.addEventListener('click', e => {
scrollToHash(getSamePageAnchor(a), e), console.log("click and scrolled");
});
});
// Scroll to the element in the URL's hash on load
scrollToHash(window.location.hash);