Bootstrap: anchar to panel title

Question

When I use an anchar link in my page, eg www.example.com/#about, my panel opens like it should. However (on a page with scroll bars) when I click on a link, the page top is the body of the panel and not the title. How can I make sure that I can always see the title?

<div id="accordion" role="tablist" aria-multiselectable="true">
    <div class="panel">
        <a role="button" data-toggle="collapse" data-parent="#accordion" href="#about" aria-expanded="false" aria-controls="about">Title</a>
        <div id="about" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingTwo" style="height: auto;">
          <p>Body</p>
        </div>
    </div>
    /* other panels */
</div>

Javascript:

location.hash && $(location.hash + '.collapse').collapse('show');

Answer 1

You Don't need JavaScript to do This. Place a id="foo" to the panel title and go to it clickling a href="#foo" link