I am using Anchorjs with Bootstrap scrollspy (or at least trying to!).
AnchorJS adds id to each element on DOMContentLoaded:
document.addEventListener('DOMContentLoaded', function (event) {
const anchors = new AnchorJS();
anchors.add('.post h2:not(:empty), .post h3:not(:empty), .post'
+ ' h4:not(:empty), .post h5:not(:empty), .post h6:not(:empty),'
+ ' .post p:not(:empty)');
anchors.options = {icon: '#'};
});
ScrollSpy is initiated after complete readystatechange:
document.addEventListener('readystatechange', event => {
if (event.target.readyState === "complete") {
const scrollSpyContentEl = document.getElementById('body')
const scrollSpy = bootstrap.ScrollSpy.getOrCreateInstance(scrollSpyContentEl, {
target: '#anchor-list',
offset: 36,
}) // Returns a Bootstrap scrollspy instance
}
});
However, I still get an a Uncaught DOMException:
Failed to execute 'querySelector' on 'Document': '#example-anchor' is not a valid selector.
This is presumably because document.getElementById('body') does not include the IDs set by AnchorJS.
How can I fix this? scrollspy.refresh() makes no difference.
