Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > Вёрстка веб-сайтов > Кнопка: прокрутить вверх


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

Автор: Oldshelf 12.10.2020, 12:34
Вопрос решён:

Код

<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;

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)