Trying to start smooth scrolling with a load group button
I have a group of bootstrap button groups that I use to create a quiz on my page and I would like the page to automatically and smoothly transition to the next group of questions / buttons when one of the buttons is clicked / answered. I know how to make smooth scrolls with anchor elements, but as far as I can understand the buttons should be here and cannot be anchored because if I change them to anchor they don't behave correctly. I use the events of the Meteor template to handle the logic of what happens when the answers to the quiz are selected. Here's an example of my HTML for one of the button groups:
<div class="panel-body">
<div id="scenario" class="row btn-group">
<div class="col-sm-6 col-md-3">
<div class="thumbnail-noborder">
<button type="button" class="btn btn-default house" data-val="house">
<img class="img-responsive" alt="icon showing house" src="shelter.png">
<h3 class="caption">Home:</h3>
<small>Earthquake</small><br>
<small>Storm</small><br>
<small>Etc.</small><br>
</button>
</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="thumbnail-noborder">
<button type="button" class="btn btn-default car" data-val="car">
<img class="img-responsive" alt="icon showing car" src="car.png">
<h3 class="caption">Road:</h3>
<small>Breakdown</small><br>
<small>Accident</small><br>
<small>Etc.</small><br>
</button>
</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="thumbnail-noborder">
<button type="button" class="btn btn-default gethome" data-val="gethome">
<img class="img-responsive" alt="icon showing office" src="office.png">
<h3 class="caption">Office:</h3>
<small>Earthquake</small><br>
<small>Utilities Disruption</small><br>
<small>Etc.</small><br>
</button>
</div>
</div>
</div>
</div>
Here's a javascript example for handling events of the Meteor template: button click:
'click .hike' : function(){
displayReset();
Session.set("scenario", "Hike");
console.log("Scenario is " + Session.get("scenario"));
scenarioCodeMaker();
kitRebuild();
},
I also have the following in javascript for Meteor template events so that it can only select one button in each group, the behavior I should have:
'click button': function(e) {
var $target = $(e.currentTarget);
//console.log($target);
$target.closest(".btn-group").find("button").removeClass('active');
$target.addClass('active');
},
I have anchor elements elsewhere that cause smooth scrolling elsewhere on the page, and I am using the following javascript in the Meteor template.rended function to accomplish this:
$(function() {
$('a[href*=#]:not([href=#]):not([data-toggle=collapse])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && 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;
}
}
});
});
Is it possible in some way to change them to buttons on a binding without twisting their behavior or triggering a scroll event with a single click of the button? I am completely new to programming and stackoverflow. Thank!
source to share
you already have the code for scrolling anti-aliasing in your .rendered.
$('html,body').animate({
scrollTop: target.offset().top
}, 1000);
You can use the same code to scroll to any element on the page. For example, to scroll through this answer, you can use this code (scroll up, open your console and paste this code, wait for the magic to happen):
$('html,body').animate({
scrollTop: $('#answer-29996593').offset().top
}, 2000);
source to share