Кнопка вверх актуальна для одностраничных сайтов, так как они имеют длинное тело. А также при просмотре сайтов, с большим количеством материала с мобильных устройств. Для добавления кнопки на сайт необходимо в верстку добавить элемент с id=»scrollup». При наведении на этот элемент он будет осветляться. Показываться кнопка будет только при прокрутке страницы, заданной в теле скрипта(сейчас стоит смещение 550 пикселей). Если нужно, чтобы кнопка показывалась всегда, то надо ставить 0 пикселей. При нажатии на кнопку страница будет прокручена до самого начала вверх.
window.onload = function() { // после загрузки страницы
var scrollUp = document.getElementById('scrollup'); // найти элемент
scrollUp.onmouseover = function() { // добавить прозрачность
scrollUp.style.opacity=0.3;
scrollUp.style.filter = 'alpha(opacity=30)';
};
scrollUp.onmouseout = function() { //убрать прозрачность
scrollUp.style.opacity = 0.5;
scrollUp.style.filter = 'alpha(opacity=50)';
};
scrollUp.onclick = function() { //обработка клика
window.scrollTo(0,0);
};
// show button
window.onscroll = function () { // при скролле показывать и прятать блок
if ( window.pageYOffset > 550 ) {
scrollUp.style.display = 'block';
} else {
scrollUp.style.display = 'none';
}
};
};
