I have always used this jQuery script for smooth scrolling:
var root = $('html, body');
$('a[href^="#"]').click(function() {
root.animate({
scrollTop: $($.attr(this, 'href')).offset().top
}, 1000);
return false;
});
How can I do this with vanilla JavaScript? I have tried this:
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
But it doesn't work with Safari, which is a deal breaker for me.
As you can read on the docs safari doesn't support options parameters on scrollIntoView so you'll need to find another method. I suggest taking a look at this alternative.