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

Question

[ugit]

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

После нажатия на 'day' идет скролл вниз до другого блока. Как сделать чтобы при нажатии на 'night' произошел скролл вверх обратно?

Answer 1

[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/

Answer 2

[Pulychuk]

Вариант через якорную ссылку