I can't get scrollspy to work with my bootstrap navbar

Question

I know this is a very common problem, but I have spent ~two days crawling the forums, trying fixes, can't seem to find the answer.

I have a standard bootstrap setup that uses some parallax scrolling. I have a navbar fixed to the bottom of the page. Each <li> is shaped like a circle, and inside the <li> is an <a> tag. Each 'circular' <li> is linked to an anchor tag on the page in order to provide navigation around the page. This is a one-page template set up.

Here is a fiddle: https://jsfiddle.net/k8g3qydw/1/

I have the bootstrap.css and .js files properly enqueued, I added data-target=".scrollspy" data-spy="scroll" data-offset="0" to the body tag and added the class .scrollspy to the parent element of my <ul> like so:

<div class="scrollspy board-inner">
    <ul class="nav nav-tabs" id="myTab">
        <div class="liner"></div>
            <li class="nav-item active">

So, I am pretty confused as to what to do!

Any help is much appreciated!

Answer 1

There are multiple mistakes in your code.

1. You should use one method to add Bootstrap ScrollSpy to your page, not both: via Data Attributes or JavaScript. So you should delete your body attributes or javasript line $('body').scrollSpy({...});

2. ID attribute must be unique to the whole document. You have repeated IDs on page. And.. In wrong place. On working fiddle #spy was assigned to nav wrapper, since it is the one which is being spied.

3. Navbar links should point to "resolvable id targets" instead of <a name="service"> . You should use <a id="service"> .

4. And also make sure that bootstrap.min.js is included after jQuery in your document. Since jQuery is required for Bootstrap, not other way.

Here is a working JSFiddle