@ugit

Как сделать так, чтобы блок переместился при нажатии на ссылку?

Codepen
( встроенное добавление codepen'a не работает )

После нажатия на 'day' идет скролл вниз до другого блока. Как сделать чтобы при нажатии на 'night' произошел скролл вверх обратно?
  • Вопрос задан
  • 104 просмотра
Решения вопроса 2
0xD34F
@0xD34F
Определяем класс, который будет сдвигать .wrap:

.wrap-active {
  transform: translateY(-100%);
}

Переключаем этот класс при кликах по ссылкам:

$('.wrap').on('click', 'a', function(e) {
  e.preventDefault();
  $(e.delegateTarget).toggleClass('wrap-active');
});

https://jsfiddle.net/uvoqfn82/

Или, без js.

Перед .wrap добавляем скрытый чекбокс:

<input type="checkbox" id="toggle" hidden>

Ссылки заменяем на label'ы, переключающие чекбокс:

<a href="#">Day</a> ---> <label for="toggle">Day</label>

<a href="#">Night</a> ---> <label for="toggle">Night</label>

Сдвигаем .wrap не при наличии дополнительного класса, а если чекбокс перед ним выставлен:

.wrap-active { ---> #toggle:checked + .wrap {

https://jsfiddle.net/uvoqfn82/1/
Ответ написан
Комментировать
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы