Created
December 27, 2023 21:21
-
-
Save bridgetwes/b96b3135e750c586adf3e94ed9c0dcc9 to your computer and use it in GitHub Desktop.
Vanilla Javascript smooth scroll to element from URL hash - on load or from in page link
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
* | |
* Smooth Scroll to Anchors | |
* */ | |
const offsetTopScroll = 200; | |
//Smooth scroll on page load if anchor is in URL | |
if (window.location.hash) { | |
const hash = window.location.hash; | |
const target = document.getElementById(hash.replace('#', '')); | |
if (target) { | |
//first scroll to top because browser bounced to anchor at load | |
window.scroll({ | |
top: 0, | |
left: 0, | |
behavior: 'instant' | |
}); | |
window.scroll({ | |
top: target.offsetTop - offsetTopScroll, | |
left: 0, | |
behavior: 'smooth' | |
}); | |
} | |
} | |
//Smooth scroll to anchor when clicking on a link with #hash | |
const anchorLinks = document.querySelectorAll('a[href*="#"]'); | |
//get site domain | |
const domain = window.location.hostname; | |
if (anchorLinks) { | |
anchorLinks.forEach(link => { | |
const hostname = link.getAttribute('href').split('/')[2]; | |
//check if link is to current site | |
if (hostname && hostname === domain) { | |
link.addEventListener('click', e => { | |
e.preventDefault(); | |
const href = link.getAttribute('href'); | |
const url = new URL(href); | |
target = document.getElementById(url.hash.replace('#', '')); | |
if (target) { | |
window.scroll({ | |
top: target.offsetTop - offsetTopScroll, | |
left: 0, | |
behavior: 'smooth' | |
}); | |
//Update URL with hash because e.preventDefault() prevents default browser behavior | |
history.pushState({}, "", url); | |
} | |
}); | |
} | |
}); | |
} | |
/* | |
* | |
* END: Smooth Scroll to Anchors | |
* */ |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment