title: How do I implement smooth scrolling with Bootstrap?
body: <p>I've been struggling for two hours with several different jQuery plugins trying to get smooth scroll to work for my site. </p>
  
  <p>Here is the relevant code right now:</p>
  
  <pre><code>&lt;div class="row-fluid"&gt;
   &lt;header class="span12 hero-unit"&gt;
   &lt;ul class="thumbnails"&gt;
    &lt;li class="span3"&gt;&lt;/li&gt;
    &lt;li class="span2"&gt;
     &lt;a href="#Blog" class="thumbnail"&gt;
     &lt;img src="images/nav_icon-01.png" alt="Blog"/&gt;
     &lt;/a&gt;
    &lt;/li&gt;
    &lt;li class="span2"&gt;
     &lt;a href="#Projects" class="thumbnail"&gt;
     &lt;img src="images/nav_icon-02.png" alt="Projects"/&gt;
     &lt;/a&gt;
    &lt;/li&gt;
    &lt;li class="span2"&gt;
     &lt;a href="#Contact" class="thumbnail"&gt;
     &lt;img src="images/nav_icon-03.png" alt="Contact"/&gt;
     &lt;/a&gt;
    &lt;/li&gt;
    &lt;li class="span3"&gt;&lt;/li&gt;
  
   &lt;/ul&gt;
   &lt;/header&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I've deleted all my JS code (because I know that I wasn't using any of them correctly and would like to just start fresh) except this one, because this seems to actually work, but only activate upon page load and I want to know if it's possible to make it work upon click.</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  $('html, body').animate({
  scrollTop: $("#Blog").offset().top
  }, 2000);
  &lt;/script&gt;
  </code></pre>