Про плавную прокрутку страницы средствами jQuery написано уже достаточно много статей и я тоже решил написать подобную статью, но сам скрипт я решил немного доработать.
Во всех подобных статьях о плавной прокрутке просто описан метод как изменить стандартную анимацию прокрутки страницы, имеющуюся у браузера по умолчанию. При таком подходе страница прокручивается таким образом, чтобы якорь, к которому осуществляется прокрутка, по окончании анимации располагался ровно по верхней части окна браузера.
Когда я делал интернет магазин для клиента, задача стояла в том чтобы при клике по кнопке "Заказать" страница прокручивалась к блоку с формой быстрого заказа, и форма эта по окончании анимации, должна была находиться точно посередине окна браузера а не в верхней части окна. Потому мне пришлось доработать скрипт прокрутки, чтобы реализовать пожелания клиента.
Ниже будет по шагам разобран код, который при клике по ссылке с текстом "Заказать" и классом ".goto", плавно прокручивает страницу к блоку с формой обратной связи таким образом, что она была находилась в центре окна браузера (по вертикали).
Давайте начнем:
1. ставим функцию слушателя на ссылку с классом "goto" для отслеживания кликов по ней:
|
1 2 |
jQuery(document).ready(function ($) { $(".goto").click(function (event) { |
2. отменяем стандартную обработку клика по ссылке для того чтобы исключить мгновенный переход и в адресную строку не добавлялся #якорь
|
1 2 |
//отменяем стандартную обработку нажатия по ссылке event.preventDefault(); |
3. получаем значение id блока, к которому мы должны прокрутить страницу, и присваиваем это значение переменной id
|
1 2 |
//забираем идентификатор блока с атрибута href var id = $(this).attr('href'); |
4. получаем высоту окна браузера и присваиваем это значение переменной heightpage
|
1 |
var heightpage = $(window).height(); |
5. получаем высоту от начала страницы до блока, к которому будет будет прокручиваться страница и присваиваем это значение переменной topel
|
1 |
var topel = $(id).offset().top; |
6. получаем высоту блока, к которому будет осуществляться прокрутка и присваиваем это значение переменной heighttoorder
|
1 |
var heightorder = $(id).height(); |
7. вычисляем высоту, на которую нужно прокрутить страницу, и присваиваем это значение переменной positionscroll при этом помним что, после прокрутки нужный блок должен находиться по центру окна браузера по вертикали
|
1 |
var positionscroll = topel - heightpage/2 + heightorder/2; |
8. и наконец осуществляем прокрутку страницы на, полученное нами в прошлом шаге, значение пикселей за время равное 1500 мс.
|
1 |
$('body,html').animate({scrollTop: positionscroll}, 1500); |
время прокрутки, которое в нашем примере равно 1500 мс можно любое, главное не очень большое.
9. и наконец, закрываем все открытые скобки, которые были открыты при установке слушателя в шаге 1.
|
1 2 |
}); }); |
Полный код с краткими комментариями:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
jQuery(document).ready(function ($) { $(".goto").click(function (event) { //отмена стандартной обработки клика по ссылке event.preventDefault(); //идентификатор блока с атрибута href var id = $(this).attr('href'); // высота окна браузера var heightpage = $(window).height(); //высота от начала страницы до блока на который ссылается якорь var topel = $(id).offset().top; //высота блока, к которому должна прокручиваться страница var heightorder = $(id).height(); //высота, на которую нужно прокрутить страницу var positionscroll = topel - heightpage/2 + heightorder/2; //анимация прокрутки $('body,html').animate({scrollTop: positionscroll}, 1500); }); }); |
Если помог, прошу кликнуть в нужном месте на этой странице. Нужное место подписано ))
Загрузка...