Как при нажатии на кнопку пролистнуть один экран?

Question

[Ivan Stroykin]

Доброго времени суток,

Если картинка сверху (на весь экран), нужно в итоге получить следующий эффект:
- при нажатии на кнопку, чтобы страница опускалась вниз (пока картинка не скроется, на 1 экран ниже получается)
Где-то видел готовое решение, но беда - не могу все найти. Самому писать - пока не достаточно опыта в js
Может кто подтолкнуть в сторону правильного решение, пожалуйста?

Answer 1

[stasov1]

var height = $(window).height();
$(window).scrollTop(height);

Comments

[Ivan Stroykin]

Спасибо :)

Answer 2

[nikfakel]

<div class="clickedelement">
asdf
</div>
<div class="wr2">
asdf
</div>

.clickedelement {height:500px; background: #179}
.wr2 { height: 500px; background: #38b}

$(document).ready(function(){
var height = $(window).height();
$('.clickedelement').on('click',function(){
   $(window).scrollTop(height);
})
});

не забудьте подключить jQuery

Comments

[Ivan Stroykin]

Спасибо :)

[Алексей]

Добавлю только что вычисление высоты хорошо бы внести в функцию, чтобы при изменении размеров окна пролистывало на нужную высоту, а не на ту, которая была при загрузке страницы.

Answer 3

[Павел Радьков]

Если я вас правильно понял, то вам нужно такое поведение codepen.io/paulradzkov/pen/PNjqPJ?editors=0010

В этом примере в принципе js не нужен (он используется только для плавной прокрутки). Можно поставить якорь на элемент после картинки и листать к нему.

Answer 4

[Илья Пирожок]

Не знаю четкого ответа в плане кода, но думаю делается так: есть к примеру 3 секции, при помощи js делаем height каждой секции равной высоте дисплея с которого смотрим сайт. Потом при помощи опять таки js и координат делаем пролистывание на высоту секции.

Comments

[Ivan Stroykin]

да не, у меня есть 1 секция (в самом верху), которую нужно пролистнуть. Изображение = высоте экрана (с какого бы не зашел), т.е. можно при помощи $(window).height(); просто узнать высоту экрана и сделать прокрутку на эту цифру. А вот сам код я не могу правильно составить, к сожалению :)