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

плавне

Освойте безкоштовно найпростіший, швидкий і гнучкий спосіб створювати адаптивні веб-сайти.

Дизайн лендінгу

прокручування

Створюйте дизайн будь-яких сайтів - для себе та на замовлення!

Популярне

  • Головна
  • ->
  • Матеріали
  • ->
  • Плавне прокручування сторінки вгору на jQuery

Reg.ru: домени та хостинг

Найбільший реєстратор та хостинг-провайдер в Укаини.

Понад 2 мільйони доменних імен на обслуговуванні.

Понад 700 тис. клієнтів у всьому світі вже зробили свій вибір.

Безкоштовний Курс "Практика HTML5 та CSS3"

з основ адаптивної верстки

на HTML5 та CSS3 з повного нуля.

Фреймворк Bootstrap: швидка адаптивна верстка

Навчіться верстати просто, швидко та якісно, ​​використовуючи потужний та практичний інструмент.

Верстайте на замовлення та отримуйте гроші.

Що потрібно знати для створення PHP-сайтів?

Відповідь тут. Тільки найважливіше і корисне для веб-розробника-початківця.

Дізнайтеся, як створювати якісні сайти на PHP всього за 2 години та 27 хвилин!

Створіть свій сайт за 3 години та 30 хвилин.

Вам залишиться лише наповнити його потрібною інформацією та змінити дизайн (за бажанням).

Вивчіть основи HTML та CSS менш ніж за 4 години.

Ви зможете створити свої перші HTML-сторінки та надати їм потрібний вигляд за допомогою CSS.

Безкоштовний курс "Сайт на WordPress"

Бажаєте освоїти CMS WordPress?

Отримайте уроки з дизайну та верстки сайту на WordPress.

Навчіться працювати з темами та нарізати макет.

*Наведіть курсор миші, щоб призупинити прокручування.

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

Розмір: 20,4 Мб.

Тривалість: 8 хв. 13 сек.

Дуже часто буває зручно скористатися посиланням "Вгору", коли знаходишся ближче до нижньої частини сторінки.

З'являються вони лише при прокручуванні сторінки вниз на певну кількість пікселів, які можна самостійно задавати.

Це дуже зручно ще й тому, що привертає увагу людини до інтерактивного елементу на сторінці, і він помічає, що є можливість скористатися такою функцією.

Спочатку підключаємо бібліотеку jQuery, потім файл script.js з кодом, який ми пишемо самі.

Також у цьому файлі нам потрібно розмістити саме посилання, при кліку по якому відбуватиметься плавне піднесення до верхньої частини сторінки:

2. Друге - це файл script.js, в якому ми прописуємо функції, що виконують основні дії:

Отже, спочатку ми чекаємо повного завантаження документа і приховуємо нашу кнопку "Вгору", щоб спочатку її не було видно на сторінці.

Далі ми фіксуємо подію прокручування вікна і якщо прокручування йде вниз на 700 пікселів і більше, ми плавно відображаємо кнопку "Вгору" за допомогою методуfadeIn. Інакше ми її приховуємо методомfadeOut.

У другій анонімній функції ми відстежуємо подію кліка за посиланням усередині блоку#back-topі застосовуємо методanimateдля плавного підйому до верхньої частини сторінки (scrollTop:0) за 800 мс.

3. І, третє - це файл стилів. У нашому прикладі в ньому немає нічого зайвого, тому стилів мало:

З того, про що варто згадати, можна назвати значенняfixedдля властивостіpositionу блоку#back-top. Це дозволяє зафіксувати положення кнопки щодо вікна браузера.

Далі - використання властивостейtransitionдля забезпеченняплавності появи та зникнення елементів. І, нарешті, це використання властивостіbackgroundдля того, щоб накласти зображення стрілки на наш блок "Вгору".

Сподіваюся, цей урок був для вас корисним і, звичайно ж, застосовуйте це у своїх проектах!

З повагою, Дмитро Науменко.