title: Trying to trigger a smooth scroll with a bootstrap button group click
body: <p>I have a series of bootstrap button groups that I'm using to build a quiz on my page, and I'd like the page to automatically and smoothly scroll to the next question/button group once one of the buttons is pushed/an answer is selected. I know how to do smooth scrolls with anchor elements, but as far as I can figure out, the buttons must be buttons here and cannot be anchors because if I change them to anchors, they don't behave properly. I'm using Meteor template events to handle the logic behind what happens when quiz answers are selected. Here's an example of my HTML for one of the button groups:</p>
  
  <pre><code>    &lt;div class="panel-body"&gt;
              &lt;div id="scenario" class="row btn-group"&gt;
                  &lt;div class="col-sm-6 col-md-3"&gt;
                      &lt;div class="thumbnail-noborder"&gt;
                          &lt;button type="button" class="btn btn-default house" data-val="house"&gt;
                              &lt;img class="img-responsive" alt="icon showing house" src="shelter.png"&gt;
                              &lt;h3 class="caption"&gt;Home:&lt;/h3&gt;
                              &lt;small&gt;Earthquake&lt;/small&gt;&lt;br&gt;
                              &lt;small&gt;Storm&lt;/small&gt;&lt;br&gt;
                              &lt;small&gt;Etc.&lt;/small&gt;&lt;br&gt;
                          &lt;/button&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="col-sm-6 col-md-3"&gt;
                      &lt;div class="thumbnail-noborder"&gt;
                          &lt;button type="button" class="btn btn-default car" data-val="car"&gt;
                              &lt;img class="img-responsive" alt="icon showing car" src="car.png"&gt;
                              &lt;h3 class="caption"&gt;Road:&lt;/h3&gt;
                              &lt;small&gt;Breakdown&lt;/small&gt;&lt;br&gt;
                              &lt;small&gt;Accident&lt;/small&gt;&lt;br&gt;
                              &lt;small&gt;Etc.&lt;/small&gt;&lt;br&gt;
                          &lt;/button&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="col-sm-6 col-md-3"&gt;
                      &lt;div class="thumbnail-noborder"&gt;
                          &lt;button type="button" class="btn btn-default gethome"  data-val="gethome"&gt;
                              &lt;img class="img-responsive" alt="icon showing office" src="office.png"&gt;
                              &lt;h3 class="caption"&gt;Office:&lt;/h3&gt;
                              &lt;small&gt;Earthquake&lt;/small&gt;&lt;br&gt;
                              &lt;small&gt;Utilities Disruption&lt;/small&gt;&lt;br&gt;
                              &lt;small&gt;Etc.&lt;/small&gt;&lt;br&gt;
                          &lt;/button&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>Here's an example of the Meteor template events javascript processing the click of a button:</p>
  
  <pre><code>    'click .hike' : function(){
    displayReset();
    Session.set("scenario", "Hike");
    console.log("Scenario is " + Session.get("scenario"));
    scenarioCodeMaker();
    kitRebuild();
  },
  </code></pre>
  
  <p>I've also got the following in the Meteor template events javascript to make it so only one button in each group can be selected at a time, a behavior I must have:</p>
  
  <pre><code>    'click button': function(e) {
    var $target = $(e.currentTarget);
    //console.log($target);
    $target.closest(".btn-group").find("button").removeClass('active');
    $target.addClass('active');
  
  },
  </code></pre>
  
  <p>I have anchor elements elsewhere that trigger smooth scrolls to other locations on the page, and I'm using the following javascript in the Meteor template .rendered function to accomplish this:</p>
  
  <pre><code>    $(function() {
          $('a[href*=#]:not([href=#]):not([data-toggle=collapse])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') &amp;&amp; location.hostname == this.hostname) {
  
          var target = $(this.hash);
          target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
          if (target.length) {
            $('html,body').animate({
              scrollTop: target.offset().top
            }, 1000);
            return false;
          }
        }
      });
    });
  </code></pre>
  
  <p>Is it possible to somehow either change these to buttons to anchors without screwing up their behavior or trigger a scroll event from the click of a button? I'm completely new to programming and stackoverflow. Thank you!</p>