Сверстаем кнопку, расположив ее перед закрывающимся тегом </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() { let scrollElem = document.getElementById("scrollToTop");
if (document.documentElement.scrollTop > document.documentElement.clientHeight) {
scrollElem.style.opacity = "1";
} else {
scrollElem.style.opacity = "0";
}
}
Скрипт, осуществляющий прокрутку к началу экрана при клике на кнопку:
let 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. Промежуток необходим для придания плавности прокрутки.