Add smooth scroll option to Scrollspy
Created by: SamuelMiller
Prerequisites
-
I have searched for duplicate or closed feature requests -
I have read the contributing guidelines
Proposal
Please consider adding a smooth scroll option to Bootstrap 5's Scrollspy. Currently enabling CSS smooth scrolling does not work with Scrollspy. Clicking on links continues to jump right to the id anchor.
Motivation and context
A common solution, somewhat outdated, is to use the smooth scrolling functionality in jquery. After some searching, I came across a simple Javascript solution, which also updates the URL to id anchors, that works in Chromium and Firefox-based browsers but not Safari. The JS smooth option, (Element.scrollIntoView(), is not supported by Safari--Web APIs | MDN 192).
Simple Smooth Scrolling Javascript (does not work in Safari):
let anchorlinks = document.querySelectorAll('a[href^="#"]')
for (let item of anchorlinks) { // relitere
item.addEventListener('click', (e)=> {
let hashval = item.getAttribute('href')
let target = document.querySelector(hashval)
target.scrollIntoView({
behavior: 'smooth'
})
history.pushState(null, null, hashval)
e.preventDefault()
})
}
A forum suggested https://www.npmjs.com/package/seamless-scroll-polyfill to get smooth scrolling working in Safari/Apple browsers, but I haven't been able to get to work yet in Bootstrap.
It would be great if Boostrap offered a quick and simple solution to enable smooth scrolling with Scrollspying in all browsers.