title: Scroll to Bootstrap Panel body on click of related link
body: <p>I have a long list of panels that are tiresome to scroll though. I'm trying to put a shortcut of links at the top of the page. </p>
  
  <p>Shortcut code:</p>
  
  <pre><code> &lt;a data-toggle="collapse" data-parent="#accordion" href="#collapse1" &gt;
      &lt;img src="obama.jpg"  class="img-responsive" /&gt;
   &lt;/a&gt;
  </code></pre>
  
  <p>Going to:</p>
  
  <pre><code>&lt;div class="panel panel-default"  id="obama"&gt;
      &lt;div class="panel-heading" data-toggle="collapse" data-parent="#accordion" href="#collapse1"&gt;
          // rest of panel1's code
      &lt;/div&gt;
      &lt;div id="collapse1" class="panel-collapse collapse"&gt;
          &lt;div class="panel-body"&gt;
              // panel body
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This seems to work in some regard. When I click on the shortcut it opens the panel. Now I just need to scroll to it.</p>
  
  <p>I've tried:</p>
  
  <pre><code>$('#accordion').on('shown.bs.collapse', function (e) {
     var id = $(e.target).prev().find("[id]")[0].id;
     navigateToElement(id);
  })
  
  function navigateToElement(id) {
      $('html, body').animate({
          scrollTop: $("#" + id).offset().top
      }, 1000);
  }
  </code></pre>
  
  <p>But to no avail. Any ideas? Thanks!</p>