Skip to content
GitLab
Projects Groups Snippets
  • /
  • Help
    • Help
    • Support
    • Community forum
    • Submit feedback
    • Contribute to GitLab
  • Sign in / Register
  • B bootstrap
  • Project information
    • Project information
    • Activity
    • Labels
    • Members
  • Repository
    • Repository
    • Files
    • Commits
    • Branches
    • Tags
    • Contributors
    • Graph
    • Compare
  • Issues 263
    • Issues 263
    • List
    • Boards
    • Service Desk
    • Milestones
  • Merge requests 114
    • Merge requests 114
  • CI/CD
    • CI/CD
    • Pipelines
    • Jobs
    • Schedules
  • Deployments
    • Deployments
    • Environments
    • Releases
  • Packages and registries
    • Packages and registries
    • Package Registry
    • Infrastructure Registry
  • Monitor
    • Monitor
    • Incidents
  • Analytics
    • Analytics
    • Value stream
    • CI/CD
    • Repository
  • Wiki
    • Wiki
  • Snippets
    • Snippets
  • Activity
  • Graph
  • Create a new issue
  • Jobs
  • Commits
  • Issue Boards
Collapse sidebar
  • Bootstrap
  • bootstrap
  • Issues
  • #36291
Closed
Open
Issue created May 06, 2022 by Administrator@rootContributor2 of 2 checklist items completed2/2 checklist items

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.

Assignee
Assign to
Time tracking