Стояла задача для лендинга: при нажатии на одну из моделей телефона плавно проскроллить экран к нижней границе div, где расположена кнопка “купить”. Варианты с “якорями” или подключением scrollTo.js не подошли, т.к. все они скроллят к верхней границе div, а нужно было, чтобы нижняя граница div проходила по нижней границе окна браузера.
Решение пришло несколько дней спустя (пока в javascript я новичок, поэтому не ржите если что):
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
jQuery(document).ready(function(){ // при клике по элементу $("element").click(function(){ // определяем высоту экрана var screenHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; // определяем координату верхнего угла div, к нижней границе которого будем скроллить var blockTopPosition = document.querySelector('block').offsetTop; // определяем высоту div, к нижней границе которого будем скролить var blockHeight = document.querySelector('block').offsetHeight; // определяем координату нижней границы div, к которому нужно скролить var blockBottomPosition = blockTopPosition + blockHeight - screenHeight; // скроллим с помощью scrollTop к координате нижней границы div и анимируем сие действие $('body').animate({"scrollTop":blockBottomPosition},'slow'); }); }); |
Ну и не забудьте подключить jQuery, естественно 🙂
Вот ты используешь 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’);
});
Сорян, на jquery внешнюю высоту можно узнать так
ourBlock.outerHeight()