Bootstrap ScrollSpy doesn't transition to div when clicking on dropdown menu
In the dropdown menu click ScrollSpy not working
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>
+3
source to share
1 answer
Jump down the page using the hash location on the page being refreshed.
Thus, usually what happens (for example, with Home and details):
- You click the link
- The browser takes you wherever this link is. If it's the same page, it doesn't need to make another network call.
- The new location should be displayed in the URL bar
- If the address has a fragment ID, the browser will try to find an element with that ID and scroll to that position.
Since Bootstrap automatically connects tabs, it doesn't output a new hash to the address if you're only using it for tabs.
To fix this, since you are handling the click anyway, you can simply update the window location with a hash by adding the following line:
window.location = this.hash;
To give javascript time to switch 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 an outer window and see the address changes to help debug
See also : How to scroll to a specific location on the page using jquery?
+2
source to share