Форма с этапами, проблема с кнопками, как исправить?

Question

[Антон Вебсайтовский]

Здравствуйте, пытаюсь решить проблему с кнопкой назад стиль .back.

Поставил форму с 2 этапами.
Заполняем первый этап, нажимаем далее, скрывается кнопка далее, так как мы на втором этапе заполнения, появляются две кнопки назад стиль у кнопки back, и кнопка оформить.
Так вот проблема с кнопкой назад. у нее добавляется свойства style="display: inline;", эта функция сбивает все стили у кнопки. Как сделать чтобы js не вставлял стиль этот.

Вот рабочий пример: https://jsfiddle.net/aLw082p1/1/

А как еще сделать плавную смену этапов?
Ну и маленький вопросик еще, при клике на кнопку далее или назад, почему перекидывает на верх сайта? как это убрать.

html

<div class="step">
Этап 1
тут поля
</div>
<div class="step">
Этап 2
тут поля
</div>
<a href="#" class="back" title="Назад">Назад</a>
<a href="#" class="next" title="Следующий шаг">Следующий шаг</a>
<button type="submit" name="submit" class="pob">Отправить данные к специалисту</button>

css

.back, .next{
  display: inline-block;
  border-radius: 3px;
  padding: 17px 30px 17px 30px;
  text-align: center;
  background: #F48951;
  font-size: 16px;
  line-height: 15px;
  color: #fff;
  font-weight: 400;
  margin-right: 20px;

  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  -webkit-transition: color 300ms;
  transition: color 300ms;
}
.back:before, .next:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #212121;
  -webkit-transform: scale(0);
  transform: scale(0);
  -webkit-transition-property: transform;
  -webkit-transition-property: -webkit-transform;
  transition-property: -webkit-transform;
  transition-property: transform;
  transition-property: transform, -webkit-transform;
  -webkit-transition: 300ms ease-out;
  transition: 300ms ease-out;
  border-radius: 3px;
}
.back:hover:before, .next:hover:before {
  -webkit-transform: scale(1);
  transform: scale(1);
}

form div.step {
  display:none;
}
.back {
  display:none;
}
form button[type=submit] {
  display:none;
}

js

$(document).ready(function() { // Ждём загрузки страницы
	var steps = $("form").children(".step"); // находим все шаги формы
	$(steps[0]).show(); // показываем первый шаг
	var current_step = 0; // задаем текущий шаг
	$("a.next").click(function(){	// Событие клика на ссылку "Следующий шаг"
			if (current_step == steps.length-2) { // проверяем, будет ли следующий шаг последним
				$(this).hide(); // скрываем ссылку "Следующий шаг"
              $("form button[type=submit]").show(); // показываем кнопку "Регистрация"
			}
			$("a.back").show(); // показываем ссылку "Назад"
			current_step++; // увеличиваем счетчик текущего слайда
			changeStep(current_step); // меняем шаг
	});
	
	$("a.back").click(function(){	// Событие клика на маленькое изображение
		if (current_step == 1) { // проверяем, будет ли предыдущий шаг первым
			$(this).hide(); // скрываем ссылку "Назад"
		}
      $("form button[type=submit]").hide(); // скрываем кнопку "Регистрация"
		$("a.next").show(); // показываем ссылку "Следующий шаг"
		current_step--; // уменьшаем счетчик текущего слайда
		changeStep(current_step);// меняем шаг
	});
	
	function changeStep(i) { // функция смены шага
		$(steps).hide(); // скрываем все шаги
		$(steps[i]).show(); // показываем текущий
	}
});

Answer 1

[irishmann]

Как сделать чтобы js не вставлял стиль этот.

Как решаем показать кнопку назад, тут же добавляем CSS-свойство display: inline-block

$("a.back").show().css('display', 'inline-block'); // показываем ссылку "Назад"

А как еще сделать плавную смену этапов?

Используем hide() и show() на полную, например:

function changeStep(i) { // функция смены шага
		$(steps).hide("slow"); // в течении 600 миллисекунд скроет все шаги, 
		$(steps[i]).show("slow"); // в течении 600 миллисекунд покажет текущий шаг
	}

Или применяем другие эффекты

Ну и маленький вопросик еще, при клике на кнопку далее или назад, почему перекидывает на верх сайта? как это брать.

Отменяем события по умолчанию для ссылок "назад" и "следующий шаг", добавляем event.preventDefault(); в обработчики

$("a.next").click(function(){	// Событие клика на ссылку "Следующий шаг"
    event.preventDefault();
    if (current_step == steps.length-2) { // проверяем, будет ли следующий шаг последним
        $(this).hide(); // скрываем ссылку "Следующий шаг"
        $("form button[type=submit]").show(); // показываем кнопку "Регистрация"
    }
    $("a.back").show().css('display', 'inline-block'); // показываем ссылку "Назад"
    current_step++; // увеличиваем счетчик текущего слайда
    changeStep(current_step); // меняем шаг
});

$("a.back").click(function(){	// Событие клика на маленькое изображение
    event.preventDefault();
    if (current_step == 1) { // проверяем, будет ли предыдущий шаг первым
        $(this).hide(); // скрываем ссылку "Назад"
    }
    $("form button[type=submit]").hide(); // скрываем кнопку "Регистрация"
    $("a.next").show(); // показываем ссылку "Следующий шаг"
    current_step--; // уменьшаем счетчик текущего слайда
    changeStep(current_step);// меняем шаг
});

Comments

[Антон Вебсайтовский]

все работает отлично, а без прокрутки ни как?
я думал это ошибка в js, что при клике наверх кидает.

[irishmann]

Антон Вебсайтовский, Тормознул, сейчас исправлю ответ