CODEWITHSUNDEEP
jquerytwitter-bootstrap
user1405195
user1405195

Reputation: 1681

Bootstrap collapse on <ol> always causes scroll to top

Can anybody advise why bootstrap collapse causes the scrollbar to reset to the top whenever collapse is triggered?

To test:

Go to: http://jsfiddle.net/D2RLR/140/, scroll part-way down the page and click any of the buttons. You'll be sent back to the top but based on the documentation, this isn't default behaviour.

HTML

<div class="list">
<div class="listheader">
  <a class="btn listname" href="#">Colors</a>
</div>
<ol class="things">
  <li><a href="#">White</a></li>
  <li><a href="#">Blue</a></li>
  <li><a href="#">Red</a></li>
  <li><a href="#">Green</a></li>
  <li><a href="#">Orange</a></li>
</ol>
</div>
<div class="list">
<div class="listheader">
  <a class="btn listname" href="#">Colors</a>
</div>
<ol class="things">
  <li><a href="#">White</a></li>
  <li><a href="#">Blue</a></li>
  <li><a href="#">Red</a></li>
  <li><a href="#">Green</a></li>
  <li><a href="#">Orange</a></li>
</ol>
</div>
<div class="list">
<div class="listheader">
  <a class="btn listname" href="#">Colors</a>
</div>
<ol class="things">
  <li><a href="#">White</a></li>
  <li><a href="#">Blue</a></li>
  <li><a href="#">Red</a></li>
  <li><a href="#">Green</a></li>
  <li><a href="#">Orange</a></li>
</ol>
</div>
<div class="list">
<div class="listheader">
  <a class="btn listname" href="#">Colors</a>
</div>
<ol class="things">
  <li><a href="#">White</a></li>
  <li><a href="#">Blue</a></li>
  <li><a href="#">Red</a></li>
  <li><a href="#">Green</a></li>
  <li><a href="#">Orange</a></li>
</ol>
</div>
<div class="list">
<div class="listheader">
  <a class="btn listname" href="#">Colors</a>
</div>
<ol class="things">
  <li><a href="#">White</a></li>
  <li><a href="#">Blue</a></li>
  <li><a href="#">Red</a></li>
  <li><a href="#">Green</a></li>
  <li><a href="#">Orange</a></li>
</ol>
</div>
<div class="list">
<div class="listheader">
  <a class="btn listname" href="#">Colors</a>
</div>
<ol class="things">
  <li><a href="#">White</a></li>
  <li><a href="#">Blue</a></li>
  <li><a href="#">Red</a></li>
  <li><a href="#">Green</a></li>
  <li><a href="#">Orange</a></li>
</ol>
</div>
<div class="list">
<div class="listheader">
  <a class="btn listname" href="#">Colors</a>
</div>
<ol class="things">
  <li><a href="#">White</a></li>
  <li><a href="#">Blue</a></li>
  <li><a href="#">Red</a></li>
  <li><a href="#">Green</a></li>
  <li><a href="#">Orange</a></li>
</ol>
</div>
<div class="list">
<div class="listheader">
  <a class="btn listname" href="#">Colors</a>
</div>
<ol class="things">
  <li><a href="#">White</a></li>
  <li><a href="#">Blue</a></li>
  <li><a href="#">Red</a></li>
  <li><a href="#">Green</a></li>
  <li><a href="#">Orange</a></li>
</ol>
</div>

JS

/*$('.things').collapse("hide");*/

$(".listname:not(.disabled)").livequery('click', function(event) {
    $(this).parents('.list').find('.things').collapse("toggle");
    $("#listview, #thingview, #allview").removeClass('active');
});

(Livequery also included)

Upvotes: 1

Views: 879

Answers (1)

Diodeus - James MacFarlane
Diodeus - James MacFarlane

Reputation: 114417

You need to add:

event.preventDefault()

..to your script to cancel the click on the current href (a hash mark)

Upvotes: 2

Related Questions