Плавне кнопка "наверх" на jquery

Відео: Кнопка "вгору" для сайту своїми руками

Багато з Вас бачили, що на деяких сайтах при прокручуванні вікна браузера, в якийсь момент з`являється кнопка "наверх". Якщо по ній клікнути, то починається плавна Промотка смуги прокрутки до самого верху. як реалізувати плавну кнопку "Вгору" через jQuery, Ви і дізнаєтеся з цієї статті.

Для початку розберемося з HTML-кодом:

Відео: Плавний скролл до блоку, навігація по сторінці і кнопка "наверх"

id="Content"gt;контент 
id="Top"gt;наверх

Перейдемо до стилів:

#content { 
 background-color:# ff0- 
 height:3000px- 
} 
#top { 
 bottom:0- 
 cursor: pointer- 
 display: none- 
 font-size:150% - 
 position:fixed- 
 right:0- 
}

Безумовно, стилі можуть бути будь-якими. Головне, у кнопки "наверх"Поставити спочатку display: none; і position: fixed- з відповідними координатами розміщення, щоб вона завжди перебувала в конкретному місці, незалежно від положення смуги прокрутки.

І наостанок, jаvascript, в якому ми використовуємо jQuery:

Ось таким чином реалізується плавна прокрутка скролла на jQuery, а також плавний висновок кнопки "наверх"При відповідному положенні скролла.

Якщо Ви хочете самостійно навчитися писати подібні скрипти, то пройдіть курс.

Поділися в соціальних мережах:

Схожі