It took me half an hour and countless of stackoverflow pages to find a perfect solution for a smooth scroll for <a> anchor links.
So I'm adding here it as a snippet for future googlers.
document
.querySelectorAll('.nav__item a[href^="#"]')
.forEach(trigger => {
trigger.onclick = function(e) {
e.preventDefault();
let hash = this.getAttribute('href');
let target = document.querySelector(hash);
let headerOffset = 100;
let elementPosition = target.offsetTop;
let offsetPosition = elementPosition - headerOffset;
window.scrollTo({
top: offsetPosition,
behavior: "smooth"
});
};
});
Top comments (5)
Had trouble finding a solution that would work on a certain project that had a strange Babel config. This CSS only solution worked for me.
document
.querySelectorAll('.nav__item a[href^="#"]')
.forEach(trigger => {
trigger.onclick = function(e) {
e.preventDefault();
"Can you please explain what do you mean by 'trigger' in here?"
Trigger is the respective DOM Node that is being looped over using the forEach. Also, a onClick handler is being attached to each anchor tag using the same variable 'trigger'
Unfortunately, right now this solution does not provide access to heaven: compatibility with Safari. The only working solution that is simple, is also rather rubbish: jQuery.