Плавне прокручування вгору і вниз сторінки

Плавне прокручування вгору і вниз сторінки

У цій статті уявляю досить елегантний спосіб це зробити. Реалізація за допомогою невеликого скрипта jQuery, який дозволяє плавно прокрутити сторінку як вгору, так і вниз. Плюс просте рішення на CSS для кнопок "Вгору" та "Вниз", без картинок.

Динний скрипт хороший тим, як і плагін з попередньої статті на цю тему, що коли сторінка піднята вгору - кнопка "Вгору" прихована, коли внизу - прихована кнопка "Вниз", причому параметри висоти, на якій з'являються кнопки регулюється.

Для демонстрації просто подивіться у правий нижній кут даної сторінки!

Отже, все що нам потрібно, це два рядки HTML коду. вони і будуть нашими кнопками:

Як бачите, для реалізації стрілок - покажчиків напрямку прокрутки, ми не використовуємо картинок, вони реалізовані за допомогою спецсимволов юнікода, які просто копіюються і вставляються.

При використанні спецсимволов потрібно зробити дві перевірки:
1) перевірити даний символ на кроссбраузерность - чи відображається він у всіх браузерах (буває, що немає);
2) перевірити кодування свого сайту - повинна бути UTF-8;

Ці рядки розміщуємо де зручно в коді шаблону.
Бажаний зовнішній вигляд і розташування на сайті надається за допомогою CSS. ось приклад з демонстраційної сторінки:

І нарешті "винуватець торжества", сам скрипт jQuery


Його можна розмістити перед . деякі рекомендують перед тут вже вибір за вами.
Значення 250 в скрипті, показує: в першому рядку - кнопка з'явиться коли сторінка буде прокручена більше ніж на 250 пікселів, а в другій, що зникне коли до верху буде менше ніж 250 пікселів.

Ось і все, такий чудовий скрипт для кнопок прокрутки сторінки :) Пробуємо, ділимося, радіємо.