VPF::Кнопка: прокрутить вверх - Форум программистов

Oldshelf

Дата 10.10.2020, 10:10 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 157
Регистрация: 22.4.2018

Репутация: нет
Всего: 4

Прошу подсказать (если можно привести пример), как сделать кнопку прокрутки к началу страницы: чтобы плавно появлялась внизу сайта, по мере скролла страницы.

Oldshelf

Дата 12.10.2020, 12:34 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 157
Регистрация: 22.4.2018

Репутация: нет
Всего: 4

Вопрос решён:

Код


<div id="myBtn" class="upbtn" onclick="topFunction()"></div>

Код


.upbtn,.upbtnB {
  opacity: 0;
  z-index: 100;
  width: 60px;
  height: 60px;
  position: fixed;
  bottom: 80px;
  left: 20px;
  cursor: pointer;
  transition:all 1.0s ease;
  background-image: url('up.gif')
}
.upbtnB {
  opacity: 1;
}
.upbtnB:hover {
  background-image: url('upH.gif');
  transition:all 0.25s ease;
}

Код


function scrollFunction()
{
 if (document.body.scrollTop>20 || document.documentElement.scrollTop>20)
  document.getElementById("myBtn").className="upbtnB";
 else
  document.getElementById("myBtn").className="upbtn";
}

function topFunction()
{
 document.body.scrollTop=0;// For Safari
 document.documentElement.scrollTop=0;// For Chrome, Firefox, IE and Opera
}

window.onscroll=scrollFunction;

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »