From beb0068dffb7e5967f99c94775ccba1c0a9ad38f Mon Sep 17 00:00:00 2001
From: ShiroKSH <kushidashiro@gmail.com>
Date: Wed, 15 Jul 2026 00:27:26 +0300
Subject: [PATCH] fix(scrollspy): support nested smooth-scroll links

---
 js/src/scrollspy.js             |  2 +-
 js/tests/unit/scrollspy.spec.js | 18 ++++++++++++++++++
 2 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/js/src/scrollspy.js b/js/src/scrollspy.js
index 368092de45c9..f4dd91947e37 100644
--- a/js/src/scrollspy.js
+++ b/js/src/scrollspy.js
@@ -133,7 +133,7 @@ class ScrollSpy extends BaseComponent {
     EventHandler.off(this._config.target, EVENT_CLICK)
 
     EventHandler.on(this._config.target, EVENT_CLICK, SELECTOR_TARGET_LINKS, event => {
-      const observableSection = this._observableSections.get(event.target.hash)
+      const observableSection = this._observableSections.get(event.delegateTarget.hash)
       if (observableSection) {
         event.preventDefault()
         const root = this._rootElement || window
diff --git a/js/tests/unit/scrollspy.spec.js b/js/tests/unit/scrollspy.spec.js
index fc44471c42da..b4cb2c29ac2e 100644
--- a/js/tests/unit/scrollspy.spec.js
+++ b/js/tests/unit/scrollspy.spec.js
@@ -943,6 +943,24 @@ describe('ScrollSpy', () => {
       link.click()
     })
 
+    it('should smoothScroll when clicking an element nested in an anchor', () => {
+      fixtureEl.innerHTML = getDummyFixture()
+
+      const div = fixtureEl.querySelector('.content')
+      const link = fixtureEl.querySelector('[href="#div-jsm-1"]')
+      const observable = fixtureEl.querySelector('#div-jsm-1')
+      const clickSpy = getElementScrollSpy(div)
+      link.innerHTML = '<span>div 1</span>'
+      // eslint-disable-next-line no-new
+      new ScrollSpy(div, {
+        offset: 1,
+        smoothScroll: true
+      })
+
+      link.querySelector('span').click()
+      expect(clickSpy).toHaveBeenCalledWith({ top: observable.offsetTop - div.offsetTop, behavior: 'smooth' })
+    })
+
     it('should smoothscroll to observable with anchor link that contains a french word as id', done => {
       fixtureEl.innerHTML = [
         '<nav id="navBar" class="navbar">',