Плавный скролл к нижней границе блока div с помощью Javascript

Стояла задача для лендинга: при нажатии на одну из моделей телефона плавно проскроллить экран к нижней границе div, где расположена кнопка «купить». Варианты с «якорями» или подключением scrollTo.js не подошли, т.к. все они скроллят к верхней границе div, а нужно было, чтобы нижняя граница div проходила по нижней границе окна браузера.
Решение пришло несколько дней спустя (пока в javascript я новичок, поэтому не ржите если что):

Ну и не забудьте подключить jQuery, естественно :)

2 Comments

  1. Роман

    Вот ты используешь jquery, но элемент block получаешь при помощи нативного js, почему бы вместо
    document.querySelector(‘block’)
    не использовать
    $(‘block’), раз уж ты все равно jquery используешь?

    И раз уж ты заносишь все в память, то проще было бы занести элемент, которого координаты ты получаешь, а потом уже к нему обращаться, т.е. как-то так —

    // поговаривают, будто так биндить события лучше
    $(«element»).on(‘click’, function () {

    var ourBlock = $(‘block’),
    screenHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight,
    blockTopPosition = ourBlock.offsetTop,
    blockHeight = ourBlock.offsetHeight,
    blockBottomPosition = blockTopPosition + blockHeight — screenHeight;

    $(‘body,html’).animate({«scrollTop»:blockBottomPosition},’slow’);

    });

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *