Кнопка вверх для сайта на HTML

Назад

Создать кнопку «наверх» для сайта не много усилий.

Давайте создадим его в языках HTML и CSS и jQuery.

Нужен HTML для разметки, CSS для дизайна.

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

Создать кнопку наверх

1. Добавить между телом теги разметки для нашей кнопки.

Наверх

Вместо текста можно вставить картинку или блок.

2. Добавить немного дизайн в CSS.

#toTop{
фон-цвет: #aaca3c;
обивка: 5 пикселей;
курсор: указатель;
Z-индекс: 9999;
дно: 10px;
право: значение 10px;
должность: фиксированная;
}

3. Подключаем jQuery библиотеку перед закрытием тега боди(если нет).

4. Теперь вставляем наш скрипт с jQuery после подключения библиотеку jQuery.

$(функция(){$.ФН.scrollToTop=функция(){
$(этот).скрыть().removeAttr(«Солар»);
если($(окно).scrollTop()!=»0″){
$(этот).fadeIn(«медленный»)
}
ВАР scrollDiv=$(это);
$(окно).(функция прокрутки(){
если($(окно).scrollTop()==»0″){
$(scrollDiv).затухание(«медленный»)
}еще{$(scrollDiv).fadeIn(«медленные»)}
});
$(этот).нажмите кнопку(функция(){
$(«HTML, в теле»).анимировать({scrollTop:0},»медленный»)
})
}});
// Звонок
$(функция() {
$(«#toTop»).scrollToTop();
});

Вот две функции, во-первых, мы ставим все эффекты во втором, мы называем эту функцию для определенного объекта, в нашем случае #toTop.

Как мы создали кнопку «наверх».