Как сделать скролл до низа элемента?

Question

[Дмитрий Локшин]

Друзья, привет.
Вроде очень легкий элемент, но что-то не пойму почему не работает, прям ерунда какая-то происходит.
Есть такая разметка: https://jsfiddle.net/lokdmt/cuoevwnd/
при клике на "вниз", должен произойти скролл вниз на высоту блока с картой, т.е. нижняя граница с картой должна оказаться у верха экрана.
И наоборот, при клике на "вверх" должен произойти скролл вверх на высоту блока с картой, т.е. верхняя граница с картой должна оказаться у низа экрана.

Answer 1

[Evgeny Kulakov]

Вариант: https://jsfiddle.net/kulakoff/1e5jpx74/

Comments

[Дмитрий Локшин]

Спасибо большое за ответ, решил таким же способом, за исключением пары методов:

$('.top').click(function(){
   $("html, body").animate({
      scrollTop: mapHeight.offset().top - $(window).height()
   }, "slow");
});

$('.bottom').click(function(){
   $("html, body").animate({
      scrollTop: mapHeight.height() + mapHeight.offset().top
   }, "slow");
});

единственно что работает через раз на мобильных устройствах, при скролле вниз все работает отлично, но при скролле вверх срабатывает то как надо, то недоскролливает пикселей 30. Уже всю голову поломал, но скорее всего из-за того, что некоторые блоки у меня динамически меняют высоту.

[Evgeny Kulakov]

Возможно дело в том, что вы используете height() вместо outerHeight().

[Дмитрий Локшин]

Evgeny Kulakov: С Вашим вариантом абсолютно также)

Answer 2

[Александр Шаповал]

Я скролю так

$('html, body').animate({
    scrollTop: $('#id_element').offset().top - 60
}, 1000);

где #id_element это ID элемента

$( "#check" ).click(function() {
$('html, body').animate({
    scrollTop: $('#foot').offset().top - 60
}, 1000);
}

<div id="check">Нажми</div>
    /* тут много всякого текста */
<div id="foot"></div