Javascript

Прокрутка страницы вверх на Javascript

Прокрутка страницы Вверх на чистом Javascript

Сверстаем кнопку, расположив ее перед закрывающимся тегом </body>, либо в любом удобном для вас месте:

<div id="scrollToTop" onclick="goUp();">ВВЕРХ </div>

Стили для созданной кнопки:

#scrollToTop {
      position: fixed;
      bottom: 20px;
      right: 20px;
       font-weight: bold;
      cursor: pointer;
      opacity: 0;
      transition: all 0.5s ease-in;
}

Кнопка будет расположена в правом нижнем углу.

Скрипт, который убирает прозрачность кнопки при прокрутке экрана на высоту видимой области окна и возвращает ее в обратном случае:

window.onscroll = function() {
   var scrollElem = document.getElementById("scrollToTop");
   if (document.body.scrollTop > document.documentElement.clientHeight) {
      scrollElem.style.opacity = "1";
   } else {
       scrollElem.style.opacity = "0";
   }
}

Скрипт, осуществляющий прокрутку к началу экрана при клике на кнопку:

var timeOut;
function goUp() {
   var top = Math.max(document.body.scrollTop,document.documentElement.scrollTop);
   if(top > 0) {
      window.scrollBy(0,-100);
      timeOut = setTimeout('goUp()',20);
   } else clearTimeout(timeOut);
}

Функиця goUp() запускается при клике на div#scrollToTop и затем запускается с определенным промежутком (20мс) до тех пор пока высота от верха окна не будет равна 0. Промежуток необходим для придания плавности прокрутки.


сайт на Bitrix

Территориально я нахожусь в Санкт-Петербурге, но могу и готова работать со всеми, вне зависимости от вашего местоположения. Вы можете написать мне через форму обратной связи, либо связаться через социальные сети. Ознакомиться с портфолио можно здесь и здесь.

Социальные сети

Рандом новостей