Я добавил этот код для рабочей кнопки браузера вперед и назад с моей формой продолжения и предыдущей кнопкой. Первый и второй шаги работают нормально, но когда мы вернемся с третьего на второй шаг, анимация будет работать в обратном порядке, но когда мы вернемся со второй на первую анимацию, работающую как положено. Спасибо!
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();
}
};
});