JS動畫/序列播放后滾動到特定的錨點

Question

我有一個簡單的函數，可以在單擊某些問題后加載，並且可以正常工作，但是我想在問題的末尾使用.step_button類將頁面滾動到錨點：

<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>

我認為必須更改的javascript部分是：

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();
}

但是我不確定。.我還找到了一種包含JSFIDDLE的方法，因此應該更容易弄清楚，我在小提琴中添加了一堆<br />以確保工作解決方案可以滾動到錨點step_button

Answer 1

將函數更改為如下所示：

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');
    }

這是小提琴