### Problem

According to the [docs on scrollspy][1]:

>**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*: &nbsp;&nbsp;`<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][2]:



    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>




[1]: http://getbootstrap.com/javascript/#callout-scrollspy-target-ids
[2]: https://github.com/twbs/bootstrap/blob/master/js/scrollspy.js#L109

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>

			
		</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!

Can't get Bootstrap ScrollSpy to work on my page

The jump down the page is by virtue of the hash location on the page being updated.  

So normally what happens (as with Home and Details) is:

1. You click a link
2. The browser takes you wherever that link is. If it's the same page, it doesn't have to make another network call.
3. The URL bar should show the new location
4. If the address has a fragment identifier, then the browser will try to find an element with that ID and scroll to that position.

Since Bootstrap is automatically wiring up the tabs, it doesn't output the new hash to the address, assuming you're using it for tabbing only.  

To fix this, since you're handling the click anyway, you can just update the window location with the hash by adding the following line:

    window.location = this.hash;

To give the javascript time to toggle the new tab, use setTimeout like this:

    var location = this.href
    setTimeout(function() {
        window.location = location;
    }, 5);

### [Here's a Demo in Plunker][1]

You can open in the external window and see the address changes to help debug

**See also**: [How can I scroll to a specific location on the page using jquery?][2]

[1]: http://plnkr.co/edit/WvbBji6wJfMtxCFEmDg8?p=preview
[2]: https://stackoverflow.com/q/1586341/1366033

Dropdown menu click ScrollSpy doesn't working 

![enter image description here][1]

**Demo**: http://codepen.io/anon/pen/vOyZGq





    $(document).ready(function(){
        $('#details-dropdown li a').click(function(e){
            console.log(e);
            $("#details-menu li").removeClass("active");
            $('#details - menu li a[href="' + $(this).attr('href') + '"]').parent().addClass('active');
        });
    });



    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>

    <body data-spy="scroll" data-target="#mynav" style="padding-top:70px;">
      <div class="navbar navbar-default navbar-fixed-top">
        <div class="container">
          <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Project name</a>
          </div>
          <div class="collapse navbar-collapse" id="mynav">
            <ul class="nav navbar-nav">
              <li class="active"><a href="#home">Home</a></li>
              <li><a href="#details">Details</a></li>
              <li><a href="#contact">Contact</a></li>
              <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">My details <b class="caret"></b></a>
                <ul class="dropdown-menu" id="details-dropdown">
                  <li role="presentation" class="active"><a href="#myabout" data-toggle="tab" role="tab">About</a></li>
                  <li role="presentation"><a href="#myprofile" data-toggle="tab" role="tab">Profile</a></li>
                  <li role="presentation"><a href="#mymessage" data-toggle="tab" role="tab">Messages</a></li>
                </ul>
              </li>
            </ul>
          </div>
          
        </div>
      </div>
      <div class="container-fluid">
        <div class="row">
          <div class="col-md-12" id="home">
            <div class="jumbotron form-group">
              <h1>Hello, world!</h1>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non magnam eius voluptatum dignissimos aspernatur quas ab, consequuntur aliquid earum veniam. Fuga maiores possimus distinctio unde quae, corrupti perspiciatis adipisci, inventore!</p>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non magnam eius voluptatum dignissimos aspernatur quas ab, consequuntur aliquid earum veniam. Fuga maiores possimus distinctio unde quae, corrupti perspiciatis adipisci, inventore!</p>
              <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
            </div>
          </div>
          <div class="col-md-12" id="details">
            <div class="page-header">
              <h1>Details</h1>
            </div>
            <p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS. A fixed navbar has been added within <code>#wrap</code> with <code>padding-top: 60px;</code> on the <code>.container</code>.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam consequuntur vel repellat, quis eveniet, obcaecati, quod voluptatibus vero nobis non suscipit praesentium doloremque atque laudantium sint quidem. Perspiciatis ut, qui!</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam consequuntur vel repellat, quis eveniet, obcaecati, quod voluptatibus vero nobis non suscipit praesentium doloremque atque laudantium sint quidem. Perspiciatis ut, qui!</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam consequuntur vel repellat, quis eveniet, obcaecati, quod voluptatibus vero nobis non suscipit praesentium doloremque atque laudantium sint quidem. Perspiciatis ut, qui!</p>
            <p>Back to <a href="../sticky-footer">the default sticky footer</a> minus the navbar.</p>
          </div>
          <div class="col-md-12">
            <h1>My details</h1>
            <ul role="tablist" class="nav nav-tabs" id="details-menu">
              <li role="presentation" class="active"><a href="#myabout" data-toggle="tab" role="tab">About</a></li>
              <li role="presentation"><a href="#myprofile" data-toggle="tab" role="tab">Profile</a></li>
              <li role="presentation"><a href="#mymessage" data-toggle="tab" role="tab">Messages</a></li>
            </ul>
            <div class="tab-content">
              <div role="tabpanel" class="tab-pane active" id="myabout">
                <h1>About</h1>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur cupiditate natus quos incidunt pariatur saepe laudantium minima ipsam vero, illum vitae sint nisi consequuntur tempore repudiandae magnam placeat, quidem dolorum?</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur cupiditate natus quos incidunt pariatur saepe laudantium minima ipsam vero, illum vitae sint nisi consequuntur tempore repudiandae magnam placeat, quidem dolorum?</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur cupiditate natus quos incidunt pariatur saepe laudantium minima ipsam vero, illum vitae sint nisi consequuntur tempore repudiandae magnam placeat, quidem dolorum?</p>
              </div>
              <div role="tabpanel" class="tab-pane" id="myprofile">
                <h2>Profile</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur cupiditate natus quos incidunt pariatur saepe laudantium minima ipsam vero, illum vitae sint nisi consequuntur tempore repudiandae magnam placeat, quidem dolorum?</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur cupiditate natus quos incidunt pariatur saepe laudantium minima ipsam vero, illum vitae sint nisi consequuntur tempore repudiandae magnam placeat, quidem dolorum?</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur cupiditate natus quos incidunt pariatur saepe laudantium minima ipsam vero, illum vitae sint nisi consequuntur tempore repudiandae magnam placeat, quidem dolorum?</p>
              </div>
              <div role="tabpanel" class="tab-pane" id="mymessage">
                <h2>Message</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur cupiditate natus quos incidunt pariatur saepe laudantium minima ipsam vero, illum vitae sint nisi consequuntur tempore repudiandae magnam placeat, quidem dolorum?</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur cupiditate natus quos incidunt pariatur saepe laudantium minima ipsam vero, illum vitae sint nisi consequuntur tempore repudiandae magnam placeat, quidem dolorum?</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur cupiditate natus quos incidunt pariatur saepe laudantium minima ipsam vero, illum vitae sint nisi consequuntur tempore repudiandae magnam placeat, quidem dolorum?</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </body>




  [1]: http://i.stack.imgur.com/dzgdR.png