Javascript 如何解决浏览器和转发按钮问题

我已经为工作浏览器的“后退”和“前进”按钮添加了此代码，其中包括“表单继续”和“上一步”按钮。第一步和第二步工作正常，但当我们从第三步返回到第二步时，动画将反向工作，但当我们从第二步返回到第一步时，动画将按预期工作。 谢谢

var state={}；
$（文档）.ready（函数（）{
历史，国家({
步骤：1，
}，null，“”；
函数my_next1_2（）{
var pgrbar=2*5.56；
$（'#步骤1'）.css（'display'，'none'）；
$（'#步骤2'）.css（'display'，'block'）；
$（'.progress bar'）.width（pgrbar+'%'）；
$（'step-2'）.removeClass（“slideInLeft”）.addClass（“slideInRight”）；
$（'html，body'）。设置动画({
scrollTop:$（'.app container'）.offset（）.top
}, 100);
}
$（'.next1_2'）。单击（函数（）{
my_next1_2（）；
历史，国家({
步骤：2，
}，null，“”；
});
函数my_next2_3（）{
var pgrbar=3*5.56；
$（'#步骤2'）.css（'display'，'none'）；
$（'#步骤3'）.css（'display'，'block'）；
$（'.progress bar'）.width（pgrbar+'%'）；
$（'step-3'）.removeClass（“slideInLeft”）.addClass（“slideInRight”）；
$（'html，body'）。设置动画({
scrollTop:$（'.app container'）.offset（）.top
}, 100);
}
$（'.next2_3'）。单击（函数（）{
我的下一个2个3（）；
历史，国家({
步骤：3，
}，null，“”；
});
函数my_prev2_1（）{
var pgrbar=1*5.56；
$（'#步骤2'）.css（'display'，'none'）；
$（'#步骤1'）.css（'display'，'block'）；
$（'.progress bar'）.width（pgrbar+'%'）；
$（'step-1'）.removeClass（“slideInRight”）.addClass（“slideInLeft”）；
$（'html，body'）。设置动画({
scrollTop:$（'.app container'）.offset（）.top
}, 100);
}
$（'.prev2_1'）。单击（函数（）{
我的_prev2_1（）；
历史。返回（）；
});
函数my_prev3_2（）{
var pgrbar=2*5.56；
$（'#步骤3'）.css（'display'，'none'）；
$（'#步骤2'）.css（'display'，'block'）；
$（'.progress bar'）.width（pgrbar+'%'）；
$（'step-2'）.removeClass（“slideInRight”）.addClass（“slideInLeft”）；
$（'html，body'）。设置动画({
scrollTop:$（'.app container'）.offset（）.top
}, 100);
}
$（'.prev3_2'）。单击（函数（）{
我的_prev3_2（）；
历史。返回（）；
});
window.onpopstate=函数（事件）{
if（event.state.step==1）{
我的_prev2_1（）；
}
if（event.state.step==2）{
my_next1_2（）；
我的下一个3_2（）；
}
if（event.state.step==3）{
我的下一个2个3（）；
}
};
});

我希望能添加评论，但我需要50%的声誉。 你的HTML在哪里？？

---

或者向我们展示JSFIDLE示例很好。

感谢您的友好回复，这是我的HTML，其中有18个步骤与此步骤相同

            <!-- Step 1 -->
            <div id="step-1" class="p-5 lg animated">
                <div class="app-inner">
                    <h3 class="mb-5">What Vehicle Would You Like?</h3>
                    <div class="app-row lg">
                        <div class="app-list-wrap">
                            <div class="app-list-wrap-inner">
                                <div class="app-list cols3">
                                    <div data-step="1" class="custom-box custom-box-clicked">
                                        <input name="vehicle" value="Car" type="checkbox" id="car" checked>
                                        <label class="checkbox-label" for="car">
                                            <img src="images/car-1.jpg" alt="Car">

                                            <div class="img-title">Car</div>
                                        </label>
                                    </div>
                                </div>
                                <div class="app-list cols3">
                                    <div data-step="1" class="custom-box">
                                        <input name="vehicle" value="Suv" type="checkbox" id="bus">
                                        <label class="checkbox-label" for="bus">
                                            <img src="images/van-1.jpg" alt="Sub">
                                            <div class="img-title">SUV</div>
                                        </label>
                                    </div>
                                </div>
                                <div class="app-list cols3">
                                    <div data-step="1" class="custom-box">
                                        <input name="vehicle" value="Motorbike" type="checkbox" id="bike">
                                        <label class="checkbox-label" for="bike">
                                            <img src="images/bike-1.jpg" alt="Bike">

                                            <div class="img-title">Motorbike</div>
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="app-btn-wrap">
                    <button data-step="2" type="button" class="next app-btn next1_2">Continue</button>
                </div>
                <div class="button-btm-text">
                    Don’t worry, you can change your mind about the kind of vehicle you want at any time.
                </div>
            </div>

            <!-- Step 2 -->
            <div id="step-2" class="p-5 md animated" style="display: none;">
                <div class="app-inner">
                    <h3 class="mb-5">What Is Your Monthly Budget?</h3>

                    <div class="app-row md">

                        <div class="app-list-wrap-inner">
                            <div class="app-list cols2">
                                <div data-step="2" class="custom-box custom-box-clicked" data-value="Under £150/month">
                                    <div class="radio-toolbar">
                                        <input type="radio" id="budget1" name="budget" value="Under £150/month" checked>
                                        <label for="budget1">Under £150/month</label>
                                    </div>
                                </div>
                            </div>
                            <div class="app-list cols2">
                                <div data-step="2" class="custom-box" data-value="Under £150 - £250/month">
                                    <div class="radio-toolbar">
                                        <input class='radio' type="radio" id="budget2" name="budget" value="Under £150 - £250/month">
                                        <label for="budget2">Under £150 - £250/month</label>
                                    </div>
                                </div>
                            </div>
                            <div class="app-list cols2">
                                <div data-step="2" class="custom-box" data-value="Under £251 - £350/month">
                                    <div class="radio-toolbar">
                                        <input class='radio' type="radio" id="budget3" name="budget" value="Under £251 - £350/month">
                                        <label for="budget3">Under £251 - £350/month</label>
                                    </div>
                                </div>
                            </div>
                            <div class="app-list cols2">
                                <div data-step="2" class="custom-box" data-value="Over £350/month">
                                    <div class="radio-toolbar">
                                        <input class='radio' type="radio" id="budget4" name="budget" value="Over £350/month">
                                        <label for="budget4">Over £350/month</label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
                <div class="app-btn-wrap">
                    <button data-step="1" type="button" class="prev app-btn prev2_1">Previous</button>
                    <button data-step="3" type="button" class="next app-btn next2_3" id="p_pusher2_3">Continue</button>
                </div>
                <div class="button-btm-text">
                    Your desired monthly budget can help us better determine an appropriate loan program for you
                </div>
            </div>


            <!-- Step 3 -->
            <div id="step-3" class="p-5 animated slideInRight" style="display: none;">
                <div class="app-inner">
                    <h3 class="mb-5">Are You Currently Driving a Vehicle?</h3>
                    <div class="app-row">
                        <div class="app-list-wrap">
                            <div class="app-list-wrap-inner">
                                <div class="app-list cols3">
                                    <div data-step="3" class="custom-box custom-box-clicked" data-value="No">
                                        <div class="radio-toolbar">
                                            <input type="radio" id="driveVehicle1" name="driveVehicle" value="No" checked>
                                            <label for="driveVehicle1">No</label>
                                        </div>

                                    </div>
                                </div>
                                <div class="app-list cols3">
                                    <div data-step="3" class="custom-box" data-value="Yes, I want to keep it">
                                        <div class="radio-toolbar">
                                            <input type="radio" id="driveVehicle2" name="driveVehicle" value=" Yes, I want to keep it">
                                            <label for="driveVehicle2"> Yes, I want to keep it</label>
                                        </div>

                                    </div>
                                </div>
                                <div class="app-list cols3">
                                    <div data-step="3" class="custom-box" data-value="Yes, I want to trade it in">
                                        <div class="radio-toolbar">
                                            <input type="radio" id="driveVehicle3" name="driveVehicle" value=" Yes, I want to trade it in">
                                            <label for="driveVehicle3"> Yes, I want to trade it in</label>
                                        </div>

                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="app-btn-wrap">
                    <button data-step="2" type="button" class="prev app-btn prev3_2" id="p_pusher3_2">Previous</button>
                    <button data-step="4" type="button" class="next app-btn next3_4">Continue</button>
                </div>
                <div class="button-btm-text">
                    We can get you pre-approved with or without a trade in.
                </div>
            </div>


            <!-- Step 4 -->
            <div id="step-4" class="p-5 animated slideInRight" style="display: none;">
                <div class="app-inner">
                    <h3 class="mb-5">What Is Your Estimated Credit Rating?</h3>
                    <div class="app-row">
                        <div class="app-list-wrap">
                            <div class="app-list-wrap-inner">
                                <div class="app-list cols3">
                                    <div data-step="4" class="custom-box custom-box-clicked" data-value="Good">
                                        <div class="radio-toolbar">
                                            <input type="radio" id="rating1" name="creditRating" value="Good" checked>
                                            <label for="rating1">Good</label>
                                        </div>

                                    </div>
                                </div>
                                <div class="app-list cols3">
                                    <div data-step="4" class="custom-box" data-value="Fair">
                                        <div class="radio-toolbar">
                                            <input type="radio" id="rating2" name="creditRating" value="Fair">
                                            <label for="rating2">Fair</label>
                                        </div>

                                    </div>
                                </div>
                                <div class="app-list cols3">
                                    <div data-step="4" class="custom-box" data-value="Poor">
                                        <div class="radio-toolbar">
                                            <input type="radio" id="rating3" name="creditRating" value="Poor">
                                            <label for="rating3">Poor</label>
                                        </div>

                                    </div>
                                </div>
                                <div class="app-list cols3">
                                    <div data-step="4" class="custom-box" data-value="Very Poor">
                                        <div class="radio-toolbar">
                                            <input type="radio" id="rating4" name="creditRating" value="Very Poor">
                                            <label for="rating4">Very Poor</label>
                                        </div>

                                    </div>
                                </div>
                                <div class="app-list cols3">
                                    <div data-step="4" class="custom-box" data-value="Current Bankcruptcy">
                                        <div class="radio-toolbar">
                                            <input type="radio" id="rating5" name="creditRating" value="Current Bankcruptcy">
                                            <label for="rating5">Current Bankcruptcy</label>
                                        </div>

                                    </div>
                                </div>
                                <div class="app-list cols3">
                                    <div data-step="4" class="custom-box" data-value="No Credit">
                                        <div class="radio-toolbar">
                                            <input type="radio" id="rating6" name="creditRating" value="No Credit">
                                            <label for="rating6">No Credit</label>
                                        </div>

                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="app-btn-wrap">
                    <button data-step="3" type="button" class="prev app-btn prev4_3">Previous</button>
                    <button data-step="5" type="button" class="app-btn next4_5">Continue</button>
                </div>
                <div class="button-btm-text">
                    Your estimated credit rating helps us determined the appropriate loan program for you.
                </div>
            </div>

你想要什么车？
汽车
运动型多用途汽车
摩托车
继续
别担心，您可以随时改变对所需车辆类型的想法。
你每月的预算是多少？
低于每月150英镑
每月150-250英镑以下
低于每月251-350英镑
每月超过350英镑