So I'm using bootstrap for my website and I have many div's on each page with a dropdown on each that change the information inside the div from a chart to a table and vise-versa. This works fine except when the user selects an option from the drop down the screen seems to "jump", putting that div at the top of the screen. I found a similar issue for someone else saying it has something to do with the anchor tag(#), but I believe I need mine since the drop down does refer to something.
DROPDOWN:
<div class="dropdown">
<button class="btn btn-warning dropdown-toggle btn-xs" type="button" id="dropdownMenuGraphOneSmall" data-toggle="dropdown" aria-expanded="true">Graph One Options<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenuGraphOneSmall">
<!--DROPDOWN MENU-->
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#graphOneData">Data</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#graphOneChart">Chart</a>
</li>
<li role="presentation">
<a data-toggle="modal" data-target="#enlargeGraphOneModal" role="menuitem" tabindex="-1">Maximize</a>
</li>
<li role="presentation">
<a class="collapse-link" role="menuitem" tabindex="-1" href="#graphOneCollapse">Collapse</a>
</li>
</ul>
</div>
CONTENT IT CALLS:
<div class="content active row" id="graphOneChart">
............
</div>
<div class="content" id="graphOneData">
............
</div>
