Вітання. Давно у нас не було якихось вигод на jQuery. Сьогодні робимо скрипт прокрутка вгору на jQuery. Це потрібно практично на кожному сайті, а використовувати для цього сторонній плагін з горою непотрібного коду - не дуже хочеться.
Якщо ж сама тема створення сайту для вас не дуже цікава, то створення сайту під ключ від професіоналів - відмінне рішення.
Як зробити скрипт прокрутка вгору на jQuery
Почнемо з простого, HTML:
Це код самої кнопки, який потрібно додати в HTML.
Перейдемо до CSS, опишемо стиль кнопки, зробимо її статично справа внизу, напівпрозорої, з тінню, круглої і щоб при наведенні вона ставала більш помітною.
Як бачите, щоб не додавати символ стрілочки в HTML, і тим самим спростити верстку, ми додали його через CSS. Крім того, на CSS у нас намагаються пояснити все для кнопки - вона кругла з тінню, зафіксована справа внизу, при наведенні стає більш помітною.
З CSS закінчили. Тепер розберемося з jQuery. Від jQuery у нас залежить 2 речі:
- визначення показувати кнопку «наверх» чи ні (залежить від ступеня прокрутки сторінки)
- власне плавна прокрутка сторінки вгору при натисканні на кнопку
Спочатку ми призначаємо обробник події прокрутки сторінки, і робимо в ньому перевірку: якщо сторінка прокручена більше, ніж розмір екрану, то вже можна показувати кнопку «наверх», якщо ж сторінка прокручена менше - то навпаки приховуємо.
Потім додаємо обробник події кліка на нашу кнопку «наверх». У ньому ми анімуємо властивість scrollTop одночасно у html і body (для кросбраузерності).
Готово, кнопка наверх - працює.
Подивитися результат можна тут:
Спочатку кнопку не видно, потрібно трохи поскроліть область з превью (щоб спрацював обробник і перевірка).
Ви можете сміливо встановлювати цей код на сайт, і будете приємно здивовані, що він працює і не вимагає додаткових плагінів і скриптів. Тільки кілька рядків коду на JS, CSS і всього одна строчка на HTML (до речі, без HTML теж можна обійтися, і використовувати тільки JS, на ньому ж додати кнопку вже після завантаження сторінки).
Весь код зі статті доступний на jsfiddle.