Can't get Bootstrap ScrollSpy to work on my page

Question

I read dozens of examples and tutorials but on my page I can't get Bootstrap ScrollSpy to work. Here is my code:

HTML:

  <div id="nav_bar">
    <div class="container">

        <nav id="nav_anchors">
            <ul class="nav">
                <li><a href="#top">Aktion</a></li>
                <li><a href="#content_produkte">Produkte</a></li>
                <li><a href="#content_tarif">Tarif</a></li>
            </ul>
        </nav>

        <!-- ... some other elements ... -->
    </div>
</div>

JavaScript:

$('body').scrollspy({ target: '#nav_anchors' });

Here is my page in development:

http://www.handyservice.de/de/top-angebote/test-landingpage-4/angebot.html

Thank you in advance!

Answer 1

Problem

According to the docs on scrollspy:

Resolvable ID targets required
Navbar links must have resolvable id targets. For example, a <a href="#home">home</a> must correspond to something in the DOM like <div id="home"></div>.

Meaning the anchor href must contain and only contain the location hash of the target section.

Fix 1 - Only include anchors

Works:   <a href="#content_tarif">Tarif</a>
Doesn't: <a href="/angebot.html#content_tarif">Tarif</a>

Here's a working example in Stack Snippets:

$('body').scrollspy({ target: '#nav_anchors' });

#nav_bar {
  position: fixed;
  top: 0;
  width: 100%;
  background: white;
  border-bottom: 1px solid grey;
}

li.active {
  background: #CFCFFF;
}

body {
  padding-top: 40px;
}

section {
  height: 600px;
  width: 400px;
  border-bottom: 1px solid grey;
}

<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>

<div id="nav_bar">
  <div class="container">

    <nav id="nav_anchors">
      <ul class="nav nav-pills">
        <li><a href="#top">Aktion</a></li>
        <li><a href="#content_produkte">Produkte</a></li>
        <li><a href="#content_tarif">Tarif</a></li>
      </ul>
    </nav>

  </div>
</div>

<section id="top">top</section>
<section id="content_produkte">content_produkte</section>
<section id="content_tarif">content_tarif</section>

Fix 2 - Add Data-Target Attribute

If for some reason you can't change the href attribute of your links, you can optionally provide the data-target attribute for each anchor tag to explicitly declare the target

You'll notice that the scrollspy selector will accept either. Here's the relevant source code:

var selector = this.selector + '[data-target="' + target + '"],' +
               this.selector + '[href="' + target + '"]'

Which turns into something like this:

var selector = '#nav_anchors .nav li > a[data-target="#content_tarif"],' + 
               '#nav_anchors .nav li > a[href="#content_tarif"]'

So scrollspy will work fine if you update your links like this:

<a href="de/#content_tarif" data-target="#content_tarif">Tarif</a>

Here's a working example in Stack Snippets:

$('body').scrollspy({ target: '#nav_anchors' });

#nav_bar {
  position: fixed;
  top: 0;
  width: 100%;
  background: white;
  border-bottom: 1px solid grey;
}

li.active {
  background: #CFCFFF;
}

body {
  padding-top: 40px;
}

section {
  height: 600px;
  width: 400px;
  border-bottom: 1px solid grey;
}

<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>

<div id="nav_bar">
  <div class="container">

    <nav id="nav_anchors">
      <ul class="nav nav-pills">
        <li><a href="de/#top" data-target="#top">Aktion</a></li>
        <li><a href="de/#content_produkte" data-target="#content_produkte">content_produkte</a></li>
        <li><a href="de/#content_tarif" data-target="#content_tarif">Tarif</a></li>
      </ul>
    </nav>

  </div>
</div>

<section id="top">top</section>
<section id="content_produkte">content_produkte</section>
<section id="content_tarif">content_tarif</section>