我已为工作的浏览器的前进和后退按钮添加了此代码，同时具有我的表单继续和上一个按钮。第一步和第二步工作正常，但是当我们从第三步返回到第二步时，动画将反向运行，但是何时从第二步回到第一动画将按预期工作。谢谢！
var state = {};
$(document).ready(function () {
history.pushState({
step: 1,
}, null, "");
function my_next1_2() {
var pgrbar = 2 * 5.56;
$('#step-1').css('display', 'none');
$('#step-2').css('display', 'block');
$('.progress-bar').width(pgrbar + '%');
$('#step-2').removeClass("slideInLeft").addClass("slideInRight");
$('html, body').animate({
scrollTop: $('.app-container').offset().top
}, 100);
}
$('.next1_2').click(function () {
my_next1_2();
history.pushState({
step: 2,
}, null, "");
});
function my_next2_3() {
var pgrbar = 3 * 5.56;
$('#step-2').css('display', 'none');
$('#step-3').css('display', 'block');
$('.progress-bar').width(pgrbar + '%');
$('#step-3').removeClass("slideInLeft").addClass("slideInRight");
$('html, body').animate({
scrollTop: $('.app-container').offset().top
}, 100);
}
$('.next2_3').click(function () {
my_next2_3();
history.pushState({
step: 3,
}, null, "");
});
function my_prev2_1() {
var pgrbar = 1 * 5.56;
$('#step-2').css('display', 'none');
$('#step-1').css('display', 'block');
$('.progress-bar').width(pgrbar + '%');
$('#step-1').removeClass("slideInRight").addClass("slideInLeft");
$('html, body').animate({
scrollTop: $('.app-container').offset().top
}, 100);
}
$('.prev2_1').click(function () {
my_prev2_1();
history.back();
});
function my_prev3_2() {
var pgrbar = 2 * 5.56;
$('#step-3').css('display', 'none');
$('#step-2').css('display', 'block');
$('.progress-bar').width(pgrbar + '%');
$('#step-2').removeClass("slideInRight").addClass("slideInLeft");
$('html, body').animate({
scrollTop: $('.app-container').offset().top
}, 100);
}
$('.prev3_2').click(function () {
my_prev3_2();
history.back();
});
window.onpopstate = function (event) {
if (event.state.step === 1) {
my_prev2_1();
}
if (event.state.step === 2) {
my_next1_2();
my_next3_2();
}
if (event.state.step === 3) {
my_next2_3();
}
};
});
我希望可以添加评论，但我需要50点声望。您的HTML在哪里？或向我们展示jsfiddle示例很好。
感谢您的友善回应，这是我的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>