JS动画/序列播放后滚动到特定的锚点

Question

I have a simple function that loads after some questioned are clicked and it works fine, but I would like to scroll the page to the anchor with the .step_button class at the end of the questions:

<div id="if_one">   
    <a class="step_button" href="http://link2.com">IF QUESTION 1 = Option 1</a>
</div>
<div id="if_two">   
    <a class="step_button" href="http://link1.com">IF QUESTION 1 = Option 2</a>
</div>
<div id="if_three"> 
    <a class="step_button" href="http://link1.com">IF QUESTION 1 = Option 3</a>
</div>

I think the part of the javascript that would have to be changed is:

function run_loading_4(q1) {
    $('.run_loading_4, .loading').hide();
    $('.li_run_loading_4, li_run_loading_5, .run_loading_5, .show_end').fadeIn();
    $('#' + q1).show();
}

But I'm not sure.. I also found a way to include a JSFIDDLE so should be easier to figure out, I added a bunch of <br /> to the fiddle to make sure that the working solution will scroll to the anchors for step_button

Answer 1

Change the function to something like this:

function run_loading_4(q1) {
        $('.run_loading_4, .loading').hide();
    $('.li_run_loading_4, li_run_loading_5, .run_loading_5, .show_end').fadeIn();
    $('#' + q1).show();
        $('html,body').animate({
        scrollTop: $("#"+q1).offset().top},
        'slow');
    }

And here is the fiddle