Alina Anjum Alina Anjum - 6 months ago 14
Javascript Question

Page Losing current position when click bootstrap collapse

I am using bootstrap collapse in my project . Collapse is working fine but the problem is, I placed this collapsed menu after a long scroll ,

When I click the collapsible link, The page is scrolled to top.

How can I resolve this scroll issue, as I want the page at the same position as it was before collapse in.

Here is my code:

<div class="row">
<div class="col-md-12">
<br />
<h4><a href="#" data-toggle="collapse" data-target="#div_addtraining">Insert Training</a><br /></h4>
<div id="div_addtraining" class="collapse" style="overflow-x:auto;">
Test Test Test Test <br />Test Test Test <br />
</div>
</div>
</div>


Here is an example:

http://jsbin.com/sayunibobu/1/edit?html,js,output

Answer

The problem is with the href attribute. In case you are use a for the trigger just use the href for the id of the collapsed div (#div_addtraining).

In bottom line:

Replace

<a href="#" data-toggle="collapse" data-target="#div_addtraining"> 

to

<a href="#div_addtraining" data-toggle="collapse">

And working example:

.row {
  margin-top:3000px;
}
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

<div class="row">
  <div class="col-md-12">
    <br />
    <h4><a href="#div_addtraining" data-toggle="collapse">Insert Training</a><br /></h4>
    <div id="div_addtraining" class="collapse"  style="overflow-x:auto;">
      Test    Test    Test    Test    <br />Test    Test    Test    <br />
    </div>
  </div>
</div>