Skip to content

Instantly share code, notes, and snippets.

@bridgetwes
Created December 27, 2023 21:21
Show Gist options
  • Save bridgetwes/b96b3135e750c586adf3e94ed9c0dcc9 to your computer and use it in GitHub Desktop.
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
/*
*
* 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