bootstrap ScrollSpy not jump to div when click on dropdown menu item

Question

Dropdown menu click ScrollSpy doesn't working

enter image description here

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>
      <!--/.nav-collapse -->
    </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>

@jcuenod I need to jump in to the `div` which referred in the `href="#myprofile"`, It works well for the menu items HOME & DETAILS links — Mo., May 26 '15 at 12:57

score 2 · Accepted Answer · edited May 23 '17 at 12:05

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:

You click a link
The browser takes you wherever that link is. If it's the same page, it doesn't have to make another network call.
The URL bar should show the new location
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

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?

Scrollspy only works in one direction. In that, it updates the styling of links as you're scrolling through the page, but does not scroll to particular portions of the page when you click on links. Other browser processes handle that. — KyleMit, May 26 '15 at 13:24
That's because the div was previously invisible and the browser can't jump to an invisible id. Just give it a 5 millisecond head start and then try again. See updated code. — KyleMit, May 26 '15 at 14:05

bootstrap ScrollSpy not jump to div when click on dropdown menu item

1 Answers1

Here's a Demo in Plunker