Плавная прокрутка страницы к нужному месту на этой странице

Рекомендую хостинг которым я пользуюсь

Hosting Ukraine

Про плавную прокрутку страницы средствами jQuery написано уже достаточно много статей и я тоже решил написать подобную статью, но сам скрипт я решил немного доработать.

Во всех подобных статьях о плавной прокрутке просто описан метод как изменить стандартную анимацию прокрутки страницы, имеющуюся у браузера по умолчанию. При таком подходе страница прокручивается таким образом, чтобы якорь, к которому осуществляется прокрутка, по окончании анимации располагался ровно по верхней части окна браузера.

Когда я делал интернет магазин для клиента, задача стояла в том чтобы при клике по кнопке "Заказать" страница прокручивалась к блоку с формой быстрого заказа, и форма эта по окончании анимации, должна была находиться точно посередине окна браузера а не в верхней части окна. Потому мне пришлось доработать скрипт прокрутки, чтобы реализовать пожелания клиента.

Ниже будет по шагам разобран код, который при клике по ссылке с текстом "Заказать" и классом ".goto", плавно прокручивает страницу к блоку с формой обратной связи таким образом, что она была находилась в центре окна браузера (по вертикали).

Давайте начнем:

1. ставим функцию слушателя на ссылку с классом "goto" для отслеживания кликов по ней:

 

2. отменяем стандартную обработку клика по ссылке для того чтобы исключить мгновенный переход и в адресную строку не добавлялся #якорь

 

3. получаем значение id блока, к которому мы должны прокрутить страницу, и присваиваем это значение переменной id

 

4. получаем высоту окна браузера и присваиваем это значение переменной heightpage

 

5. получаем высоту от начала страницы до блока, к которому будет будет прокручиваться страница и присваиваем это значение переменной topel

 

6. получаем высоту блока, к которому будет осуществляться прокрутка и присваиваем это значение переменной heighttoorder

 

7. вычисляем высоту, на которую нужно прокрутить страницу, и присваиваем это значение переменной positionscroll при этом помним что, после прокрутки нужный блок должен находиться по центру окна браузера по вертикали

 

8. и наконец осуществляем прокрутку страницы на, полученное нами в прошлом шаге, значение пикселей за время равное 1500 мс.

время прокрутки, которое в нашем примере равно 1500 мс можно любое, главное не очень большое.

9. и наконец, закрываем все открытые скобки, которые были открыты при установке слушателя в шаге 1.

 

Полный код с краткими комментариями:

 

Если помог, прошу кликнуть в нужном месте на этой странице. Нужное место подписано ))

автор: Руслан Овчинников
Оценка: 1Оценка: 2Оценка: 3Оценка: 4Оценка: 5 (6 оценок, в среднем: 5,00 из 5)
Загрузка...